When a select multiple element is empty (without any options), the dimensions of the element become zero and shows only the scroll bar , also the element resizes according to the size of the data of the options . How can i create a select multiple element with a definite size which does not change irrespective of the above two factors?
Thanks in advance
Use CSS:
select.multiple {
width: 200px;
height: 400px;
}
The above assumes your select has class="multiple", but obviously you can set your CSS selector to ID or whatever suits, and of course you'll set the dimensions and units to suit your specific case.
Related
I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
I am using angular ui-grid. I would like to set the height of the grid's contents or the number of rows visible. Ideally, I would like this to set dynamically based on the window size, but, will settle for hard-coding it for now. All of the grids in the ui-grid tutorial appear to have the same height/columns visible so I'm not sure this is possible through UI-grids API.
You have
gridOptions.minRowsToShow .
you can set this to the length of your data. you can set the row height with
gridOptions.rowHeight
You can set the height of the container with css.
.grid {
width: 500px;
height: 250px;
}
so you can calculate the height in pixel
$scope.gridheight=(data.length+1) *rowHeight **
in your controller and set with the style attribute the css height.
style="height: {{gridheight}} px;" //for the container with element with ui-grid
or
ng-style="{'height':gridheight+'px'}"
**data.length+1 because of the label row.
This looks like one of those things that should have a simple answer, however I could not find any solution for it...
I have a table that contains several select elements, which have some text labels in front, on the same line.
I want to maximize the width of the select until the end of the td element.
I cannot use fixed widths.
If I use width=100% then the select will push the label out on a different line. By default, the select width is equal to the width of the longest option.
Here is how the default works: http://goo.gl/KiSGcK
Ideally, this should work with select2 also, where the default width is set to the width of the first option.
I have tried wrapping the select and/or the label in divs, setting different css options (float, display inline, etc) with no success. Any ideas?
Try to set float: left; for your label and table also. Then set them with width in percent that total is 100%. Like this label(width:40%) and table(width:60% except the border).
Finally found a solution: use overflow: hidden.
Here it is: http://goo.gl/mXNRZN
I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.
In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.
Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.
Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>
The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.
I have a HTML element that varies in height dependent on what media query is being called.
Is there any way that I can store the height of the element for both queries on document load, if the css is height: auto; ?
try to use the $(selector).height( value ) to get or set the height