How come my drop down in google chrome is only ONE line scrollable? Instead of multiple line scrollable? Here\'s my html code:
Chrome considers first 20 visible options to calculate height of drop down and after that you see scroll bar to see remaining options. That's why you see only block elements of first 20 options.
For more info: Refer accepted answer
The browser is causing the height of the drop down to render as the height of the first lot of visible items up to a specific size. You'll notice however that if you put two at the top, you get two lines, three visible gives three lines and so on. The other options are still there since you can reach them with the scrollbar, however the scrollbar is not stepping by the correct amount.
Hiding options in this manner breaks in more browsers than it works in. My recommendation would be to instead remove the options you don't need from the select itself rather than using display:none
.