Chrome display: no parameters listed

Question

How is my drop in google chrome just ONE linear scroll? Instead of a few scrollable lines? Here is 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 the whole screen: we block the elements at the top and everything is displayed: not a single element at the bottom, then the drop-down list scrolls several lines again. Why can't I start a list with a display: are there no option items?

Answer 1

The browser causes the height of the drop-down list to be displayed as the height of the first batch of visible elements to a certain size. You will notice, however, that if you put two on the top, you will get two lines, three of which see three lines and so on. The rest of the options still exist, since you can contact them using the scroll bar, however the scroll bar is not gaining the correct value.

Hiding options in this way breaks down in more browsers than in work. My recommendation would be to instead use parameters that you don't need from the select itself, and not using display:none .

Answer 2

Chrome considers the first 20 visible parameters to calculate the height of the drop-down list, after which you see a scroll bar to view the rest of the parameters. That is why you only see block elements from the first 20 options.

For more information: Pay attention to the accepted answer.