'Bootstrap-Select opens option under the div

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

javascriptjqueryhtmlcsstwitter-bootstrap


Solution 1:[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

Solution 2:[2]

To make all the bootstrap dropdown and select menus go off of its container and make it behave like it's fixed by its button.

Bootstrap-select plugin actually creates a button.dropdown-toggle - and I didn't notice it at first

document.querySelectorAll('button.dropdown-toggle').forEach( (e) => {
    e.setAttribute('data-boundary', 'window');
    e.setAttribute('data-container', 'body');
});

This also solves overflow visibility issues when adding a dropdown to a table-responsive

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Haritsinh Gohil
Solution 2 Mihkuno

Related Questions