bootstrap-select与JQuery slimscroll显示错误 [英] bootstrap-select with JQuery slimscroll display error

问题描述

我目前正在使用

虽然我想有这个（在禁用slimScroll时获得）：

< a href =https://i.stack.imgur.com/ifcWf.png =nofollow noreferrer>

我想这只是一些css溢出问题，但我找不到办法解决这个问题...
这是一支用于演示此问题的笔： codepen

html：

 < div class =container-fluidstyle =background-color ：粉蓝;> 
< div class =col-md-3> 
< div class =row> 
< div class =col-md-12> 
< div class =row> 
< button type =buttononclick =loadWidget（）;> load< / button> 
< / div> 
< div class =rowid =content> 
< div id =parent>< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

js：

  $（'＃content'）。slimScroll（{
 height：'550px'
}）; 
 
 function loadWidget（）{
 
 var options ='< option value =0>非常长的选项文本，不适合selectpicker< / option>< option value =1>又一个选项< / option>'; 
 
 var html ='< div class =form-group>< label for =SQ> randomLabel< / label>< div class =form-input> ;< select id =SQclass =selectpickermultiple data-live-search =true>'+ options +'< / select>< / div>< / div>'; 
 
 $（'＃parent'）。html（html）; 
 $（'＃SQ'）。selectpicker（'refresh'）; 
} 
  

解决方案

尝试使用容器选项并将其设置为 body ：

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

将select添加到特定元素，例如 container：'body'或 data-container =。main-content

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

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

菜单需求被告知何时更新其立场。该插件会自动检测窗口滚动/调整大小的时间。所以，我建议像：

  $（'＃grid'）。on（'scroll'，function（）{
 $（窗口）.scroll（）; 
}）; 
  

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

解决方案

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

这篇关于bootstrap-select与JQuery slimscroll显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！