Chrome- display:none options in select

Question

How come my drop down in google chrome is only ONE line scrollable? Instead of multiple line scrollable? Here's my html code:

<select>
        <option style="display:block;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:none;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
        <option style="display:block;">test</option>
</select>

However, if I move all display:block items to the top and all display:none items to the bottom, then the drop down is multiple line scrollable again. WHy can't I start the list with display:none option items?

score 4 · Accepted Answer · answered Aug 24 '11 at 14:38

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.

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

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

edited May 23 '17 at 12:13

Community

1
1

answered Mar 12 '14 at 07:09

Prasad.CH

492
1
5
25

Chrome- display:none options in select

2 Answers2

Linked