I have a html select using Bootstrap-select library. If I define no data-container the list works OK but I have a problem of overlapping. Basically, I am rendering the select (without data-container) inside a container which must have overflow-y: auto;. When the select tries to open above a navbar (main menu) it is overlapped and cut. See JSFiddle here (you must force the dropdown to be opened as drop UP).
The proper solution for me, I think it would be to define a data-container. However, as soon as I do this, the list is misplaced. See JSFiddle here (you must force the dropdown to be opened down, not up).
Another suggested workaround was to set data-container="body" instead of my own container div as previous example. This DID solve the first scenario, but it breaks for other cases. See this JSFiddle and dropdown the list "State" (so that it is opened below) and you will see how the list is misplaced (but below where it should be) letting a big empty space between the dropdown button.
Note that I would appreciate the same solution to be applied everywhere, not a solution that I would need to adjust for every place I render a list.
This has been fixed in the master branch of bootstrap-select, and will be available officially in v1.11.0. See https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255.