Home/ Questions/Q 6363643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:03:48+00:00

How come my drop down in google chrome is only ONE line scrollable? Instead

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0