Bootstrap-select With Jquery Slimscroll Display Error

I'm currently using boostrap-select 1.12.2 plugin to display some filter widgets. Thoses widgets are displayed on the left side of the page, and are dynamically added. The widget l

Solution 1:

Try using the container option and setting it to body:

https://silviomoreto.github.io/bootstrap-select/examples/#container

Append the select to a specific element, e.g. container: 'body' or data-container=".main-content"

This might fix the problem, but I haven't tested it. I don't know how it will behave with jQuery-slimScroll. I also found this issue that might help:

https://github.com/silviomoreto/bootstrap-select/issues/1552

The menu needs to be told when to update its position. The plugin automatically detects when the window is scrolled/resized. So, I recommend something like:

$('#grid').on('scroll', function() {
    $(window).scroll();
});

Solution 2:

In your case you have to partitions and in first partition you have an input and below that the suggetion box if you want it to over lap to the second partition then you have to make the position absolute of the suggetion box with highest z-index in css.

Solution 3:

Add this style to fix it (tested in both Chrome and Firefox).

#content{
  margin-left:0px;
}
.container-fluid > div{
  width:100%;
}

Solution 4:

I think you dont need to put select widget inside slim scroll div , slim scroll is adding overflow:hidden if you remove it the div will be not scrollable

here an updated pen

<divclass="row"id="content"><divid="parent"></div><divid="scrollable"><p>text </p><p>text </p><p>text </p><p>text </p><p>text </p><p>text </p></div></div></div></div></div>