bootstrap-select 和 JQuery slimscroll 显示错误

Question

我目前正在使用 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 :

而我想要这个（在禁用 slimScroll 时获得）：

我想这只是一些 css 溢出问题，但我找不到解决这个问题的方法... 这是演示问题的笔：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');
}

Answer 1

添加此样式以修复它（已在 Chrome 和 Firefox 中测试）。

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

Answer 2

在你的情况下，你必须进行分区，在第一个分区中你有一个输入，如果你想让它重叠到第二个分区，那么你必须将位置设为 absolute css 中 z-index 最高的意见箱。

Answer 3

我认为您不需要将 select 小部件放入 slim scroll div 中，slim scroll 正在添加 overflow:hidden 如果您删除它 div 将无法滚动

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>

Answer 4

尝试使用 container 选项并将其设置为 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"

这可能会解决问题，但我还没有测试过。我不知道 jQuery-slimScroll 会如何表现。我还发现了这个可能有帮助的问题：

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

bootstrap-select 和 JQuery slimscroll 显示错误

bootstrap-select with JQuery slimscroll display error

jquery

html

css

scroll

bootstrap-select