HTML select dropdown menu with max height 100% and auto size?
I have a dropdown menu created with select HTML tag. I know there are 152 options, but this large number causes some options to disable the web page view on most reasonably sized monitors if I had to make the size 152. I tried setting the max select height to 100% guessing that this would limit the size up to the maximum number that the div can fit. However, for some reason I don't understand, it still displays all 152 options with some below the screen.
<select name="school" size="152" style="max-height: 100%;">
...
</select>
Is there a way to display the select tag the way it can fit on the screen (100% height), but you can scroll to get to any options that will appear below the screen (<100% height)?
source to share
If you can restrict the necessary IE9 + support , you can use view units ( vh
) to force the viewport height to be selected using this CSS:
select {
display: inline-block;
height: 100vh;
}
You must also set the attribute size
at least 2
in the select
. As long as you set a sensible option size
on selection, it will work in a limited way in older browsers, which simply ignores the value 100vh
and displays the default selection.
What is it! The only real drawback is that the list will always be screen height, it won't automatically shrink if the number of items is less.
source to share
I would say no without some kind of jQuery replacement plugin. I just checked Firefox and Safari and FF set the height in the dropdown list and safari just goes to the bottom of the browser window by default.
Try Chosen.js, it's really good and then you can style it from there: http://harvesthq.github.io/chosen/ It even provides search options and other cool features.
source to share