12

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.

0

2 Answers 2

11

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.

1
  • 1
    Yes, After adding size like size=5 the select box opened for 5 options. But It breaks select box looks. Oct 2, 2019 at 18:41
-3

I found the answer in CSS+HTML, you can do this way:

<select>
  <optgroup style="max-height: 65px;" label="">
    <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>
  </optgroup>
</select>
4
  • 2
    Just tried this out, but it doesn't seem to work. Check this out.
    – Danield
    Apr 25, 2013 at 12:16
  • im using firefox and here it worked, change the max-height to 65px to get just the first 4 options Apr 25, 2013 at 12:53
  • hmm seems to work just in firefox... the problem is the css property max-height that dont works fine in all browsers Apr 25, 2013 at 13:04
  • 1
    i found the problem: its the style that dont apply on <optgroup> in another browsers just in firefox... im checking this out Apr 25, 2013 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.