The line-height of a virtual item is set as element style by the agrid library. So I can't use a css class here.
I need to set a larger amount than 20px default.
The height of the ag-virtual-list-container is obviously calculated by this amount.
How to set another value to the line-height?
inside the sidebar ag-filter-tool-panel including 5 items:
<div class="ag-virtual-list-container" style="height: 100px;">
<div class="ag-virtual-list-item" style="top: 0px; line-height: 20px;"><label class="ag-set-filter-item">
I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.
I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.
Using flexbox should solve your problem:
.row {
display: flex;
}
.column {
flex: 50%;
padding: 10px;
height: 500px;
}
<div class="row">
<div class="column">
<ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
<div class="column">
<ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
</div>
</div>
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
I am trying to show a grid in one of my ionic views that has a 4x3 grid. I want the grid to fit into the view, making all the rows have the same height and all the columns same width also all the content in the cells aligned center both vertically and horizontally.
I'm not so good at CSS so I'm having a hard time with it, any help?
Ionic has built in grid classes. You can do something like this
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
They have a very nice documentation on their grid system and other ways to set up rows and columns. link: http://ionicframework.com/docs/components/#grid
for css centering this should work: just place a div around your rows and columns and apply this the classes. I am not great a css but i will try to help :P
<div class=container>
<div class="row contained">
<div class="col">Centered!</div>
</div>
</div>
div.container {
height: 50%; }
div.contained {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
I'm using jQuery UI "sortable" plugin to be able to select and sort items.
I set up the plugin to have two lists, one for "available" items, the second for "selected" items.
The plugin works as expected, I can move items from one list to the other.
However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?
In fact, i'd like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)
This picture describe what I want to do:
The red lines are what I'd like. I want both lists to have this size, fixed.
Here is my code (generated from an asp.net webpage actually) :
<script type="text/javascript">
$(function () {
$("#sourceItems").sortable({
connectWith: "#targetItems",
update: function (event, ui) {
$("#selectedUserIDs").val(
$("#targetItems").sortable('toArray')
);
},
placeholder: "ui-state-highlight"
});
$("#targetItems").sortable({
connectWith: "#sourceItems",
placeholder: "ui-state-highlight"
});
$("#sourceItems, #targetItems").disableSelection();
});
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
<p>Available :</p>
<ul id="sourceItems" class="droptrue">
<li class="ui-state-default" id='i1'>item1</li>
<li class="ui-state-default" id='i32'>item2</li>
<li class="ui-state-default" id='i47'>item3</li>
<li class="ui-state-default" id='i46'>item4</li>
</ul>
</div>
<div style="float: left; display: inline-block;">
<p>Selected :</p>
<ul id="targetItems" class="droptrue">
</ul>
</div>
<div style="display: none">
<input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>
The hidden input field is my container for storing selected items (posted with the form).
I've tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.
I came here looking for a similar, but more generalized solution to the same problem. The solution here didn't help me, but I figured it out on my own and thought it might be helpful to share it.
I didn't want the two sortable lists to be fixed, I just wanted them to stay the same height. When you are dealing with a large number of items, having two dynamically sized boxes around the list can make it hard to work with, as the one box is so much smaller than the other. Making both boxes a fixed height is also less than optimal, as then you end up with scrollbars once your number of items in one list exceeds that height. I wanted both boxes to dynamically expand using the built-in functionality of the JQuery sortable, connectWith code, but I also wanted them to both just be set to the larger of the two. To do this I found that you can modify the padding on the lists, and that area will still be an interactable area for purposes of drag-and-drop.
So, to make two connectWith, sortable lists keep the same height, you can add the following handler for the over event:
over: function(event, ui) {
var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
$("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
$("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
}
Here's a fiddler example extending the other example with this event handler: http://jsfiddle.net/TLrn7/
Edit:
$(document).ready(function(){
$("#targetItems").height($("#sourceItems").height());
$("#sourceItems").height($("#sourceItems").height());
});
http://jsfiddle.net/JEY4U/1/
Old Answer:
Use a 'helper' function, which makes sure the dragged elements have proper width and height.
Something like this:
helper: function(event, ui) {
$(ui).width($(ui).width());
$(ui).height($(ui).height());
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
You use it like this:
$(SOME_OBJECT).sortable({
connectWith: ...,
placeholder: ...,
......
helper: function....
});
Of course you can write any costume helper function you'd like.
The jQuery UI list height is set to a specific height using CSS. Example for 300px height.
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
Read the documentation here: https://jqueryui.com/autocomplete/#maxheight