Menu
How do I limit the height of the dropdown of a select element - so that if the total amount of options is greater than this height - I should get a scroll in the dropdown. I'd be satisfied if I could do this in terms of pixels or number of items.
So say I had the following html markup:
<select>
<option selected>Select</option>
<option>This is an option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
<option>This is another Option</option>
</select>
How would I display only say the first 4 options and the rest within a scroll.
This is what I have so far, and it's not working.
620
You just need to use the height CSS attribute for the select tag. Show activity on this post. Notice that you have to remove the "." before select and option. This will overwrite any select and option element.
It is not possible to limit the number of visible elements in the select dropdown (if you use it as dropdown box and not as list). But you could use javascript/jQuery to replace this selectbox with something else, which just looks like a dropdown box. Then you can handle the height of dropdown as you want.
The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
Searching around on StackOverflow, I came across this. Sadly enough, if you want to keep it a dropdown-box, you cannot achieve what you want in CSS. JavaScript or jQuery will do the trick, as said in the link, or you could use the size attribute on your select tag, but this will break the dropdown-box look.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
