-1

My HTML for dropdown: 

<select>
    <option style="display:block;">--Please Select --</option>
    <option style="display:block;">one</option>
    <option style="display:none;">two</option>
    <option style="display:none;">three</option>
</select>

Issue: It displays like one by one line scrolling in chrome. No issues in Firefox and other browsers.

Attached image for clear reference.

Chrome dropdown

Please help!

Revathi Ganesh
  • 119
  • 1
  • 6
  • Do you have some style on the select, or is the parent limited in height? You can find out by right-click on the select and choose "inspect element" – Luc Dec 12 '18 at 07:19
  • Hi Luc, There is no style applied and there is no limitation in height as well for the parent. – Revathi Ganesh Dec 12 '18 at 07:31

1 Answers1

0

The browser is changing the height of the drop down to render as the height of the first visible options to the specific size. If I put two at the top, I get two lines, three visible options gives three lines and so on. The other options are still there but only with the scrollbar.

Hiding options using display: none breaks in more browsers.

I found instead of hiding the options, we don't need options from the select itself rather using display: none.

Reference: Chrome- display:none options in select

Revathi Ganesh
  • 119
  • 1
  • 6