Bootstrap-select misplacing list when using data-container

Question

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.

Answer 1

Continuing discussion from : https://github.com/silviomoreto/bootstrap-select/issues/1422

What do you mean by "a problem of overlapping" ? The fact that the select options are displayed over the heading is not an UX issue for me : this is how the native select works, and users can still click elsewhere to dismiss the menu.

Specifying a data-container would just limit the options menu inside that container, which might not be optimal for your case. Additionally, the issue specified above states that there is a positionning issue with this option.

Answer 2

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 .

Answer 3

just add the position: sticky; in bootstrap-select.css to the below class

.bootstrap-select.btn-group .dropdown-menu {
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: sticky;
}