Bootstrap-Select opens option under the div

Question

I have a fixed size div. suppose 50px. Inside that I have a drop down. I've used bootstrap select to make it searchable.

<div style="height=40px;width:200%; overflow-x:scroll;" id="hugewidth">
  <select id="ss">
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
    <option>1</option>
  </select>
  <br/><br/><br/>
</div>

Now problem is when I open the dropdown , options goes under the hugewidth div. I want the dropdown to open above that div. See the JSFiddle that might clear the problem.

JSFiddle

See!! It goes under the scrollbar. Can anyone please help me with this?? I want the dropdown option div to go over the scrollbar. If not possible, then is there any way to adjust the div height according to the dropdown option size while open and close? Dropdown options are dynamic.

One more thing. Is it possible to stop a dropdown to open upwards? Example: JSFiddle

Answer 1

You can add:

data-container="body"

to select element. Or another element to show dropdown over there. See it: http://jsfiddle.net/IceManSpy/Y9hyD/2/

demo in documentation: https://developer.snapappointments.com/bootstrap-select/examples/#container