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. ```

``` 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

Accepted Answer

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

Bootstrap-Select opens option under the div

Solution

Problem