带有 JQuery slimscroll 显示错误的引导选择

Question

我目前正在使用boostrap-select 1.12.2 插件来显示一些过滤器小部件。这些小部件显示在页面的左侧，并且是动态添加的。小部件列表可能很长（20 多个过滤器），因此我使用JQuery slimScroll 1.3.8 将它们显示在可滚动的 div 中。 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 正在添加溢出：隐藏，如果您将其删除，则 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

将选择附加到特定元素，例如container: 'body' 或 data-container=".main-content"

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

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

需要告知菜单何时更新其位置。该插件会自动检测窗口何时滚动/调整大小。所以，我推荐类似的东西：

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