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 list can be quite long (20+ filters) so I display them in a scrollable div, using JQuery slimScroll 1.3.8. It works fine when options in selectpicker are small, however when options are long, they aren't displayed correctly :

whereas I would like to have this (obtained when slimScroll is disabled) :

I guess this is just some css overflow issue, but I can't find a way to fix this... Here is a pen demonstrating the issue: codepen

html :

<div class="container-fluid" style="background-color: powderblue;">
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <button type="button" onclick="loadWidget();">load</button>
        </div>
        <div class="row" id="content">
          <div id="parent"></div>
        </div>
      </div>
    </div>
  </div>
</div>

js:

$('#content').slimScroll({
  height: '550px'
});

function loadWidget() {

  var options = '<option value="0">very long option text that doesnt fit in selectpicker</option><option value="1">yet another option</option>';

  var html = '<div class="form-group "><label for="SQ">randomLabel</label><div class="form-input"><select id="SQ" class="selectpicker" multiple data-live-search="true" >' + options + '</select></div></div>';

  $('#parent').html(html);
  $('#SQ').selectpicker('refresh');
}

回答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();
});

回答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.

回答3:

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

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

回答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

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

来源：https://stackoverflow.com/questions/42345872/bootstrap-select-with-jquery-slimscroll-display-error

标签

jquery

html

css

scroll

bootstrap-select