9

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. enter image description here

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/

Community
  • 1
  • 1
Josh L
  • 1,412
  • 2
  • 18
  • 40
  • max-height:100px; and overflow:auto;/* to get scroll */ – Mahi Oct 25 '16 at 17:27
  • This would work for a static select box but not for a dropdown – Josh L Oct 25 '16 at 17:32
  • I'm unable to replicate the behavior in Chrome v54.0.2840.71 m. The select list displays above once it can't fit below. – Rick Hitchcock Oct 25 '16 at 17:37
  • I'm running the same version of chrome along with windows 10. And our QA received the same issue on his machine. Like I mentioned once that 7th item is added it will display above. – Josh L Oct 25 '16 at 17:42
  • Weird, I'm running Windows 10 myself. We'll see if anyone else can replicate the behavior you describe. – Rick Hitchcock Oct 25 '16 at 17:47
  • Yea I jsut asked another dev and we are both looking at the same jsfiddle, we have the same monitors, same browser, same screen resolution and we are getting different results. Extremely strange and driving me crazy – Josh L Oct 25 '16 at 18:01
  • I also am having same issue, anyone figure this out. – Mike Flynn Feb 02 '17 at 18:32
  • I am experiencing the same issue. Windows 10, latest Google Chrome (v 57.0), other browsers are ok – David Votrubec Apr 10 '17 at 09:33

2 Answers2

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
Jarred Stelfox
  • 11
  • 2
0

set z-index to 1000 for form-group and form-control classes

codechick
  • 61
  • 4