HTML select box is displaying below windows task bar in chrome

Question

I am trying to add an html dropdown using the select tag and unfortunately in chrome I am unable to select option 5 and 6 as they are being displayed below the task bar in chrome on windows. If I add an option 7 then suddenly the list displays above instead of below.

This list will always be changing sizes so unfortunately positioning the list higher will not be an option as there is always the possibility of 2 options being hidden. Furthermore, the number of items displayed in the list is before a scroll bar is added is browser specific. See Height of an HTML select box (dropdown)

What I've tried so far:

• Tried converting the dropdown list to a static list when there are more than 4 options using jquery and setting list size. This however was very ugly.
• Tried using bootstraps .dropup class but this unfortunately only works with list items not select options
• Different css hacks but as mentioned earlier the list size is browser specific.

I would rather not add in any external libraries and find some kind of simple Jquery hack to fix this. You can also see what I mean by visiting this jsfiddle link and dragging the display window to the bottom of the screen:

  <div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
     <option>6</option>
  </select>
</div>

https://jsfiddle.net/v9t4rm16/

Answer 1

Looks like this is an official chrome bug It affects Chrome Version 30-61

I do not think there is an official work around.

If you do not want to wait for the chrome fix, then you could try:

• Adding white to the bottom of your page so the select has space to expand
• Adding extra options in the select itself to force chrome to render upwards

Answer 2

对于表单组和表单控件类，将z-index设置为1000