bootstrap-select与JQuery slimscroll显示错误

我目前正在使用boostrap-select 1.12.2插件来显示一些filter小部件。 小部件显示在页面左侧，并动态添加。 小部件列表可能很长（20多个filter），所以我使用JQuery slimScroll 1.3.8在可滚动的div中显示它们。 当selectpicker中的选项很小时，它工作正常，但是当选项很长时，它们无法正确显示：

而我想有这个（当slimScroll被禁用时获得）：

我想这只是一些css溢出问题，但我无法找到解决这个问题的方法……这是一支笔，展示了这个问题： codepen

HTML：

 
 
 
 
 load 
 
 
 
 
 
 
  

JS：

 $('#content').slimScroll({ height: '550px' }); function loadWidget() { var options = 'very long option text that doesnt fit in selectpickeryet another option'; var html = '
randomLabel
' + options + '
'; $('#parent').html(html); $('#SQ').selectpicker('refresh'); } 

Answer 1

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

需要告知菜单何时更新其位置。 该插件会自动检测窗口滚动/resize的时间。 所以，我建议像：

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

Answer 2

在你的情况下，你必须分区，在第一个分区你有一个输入，如果你想让它超过第二个分区，那么你必须在下面的第二个分区，然后你必须使具有最高z-index的suggetion框的位置absolute CSS。

Answer 3

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

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

Answer 4

我认为你不需要将精选小部件放在slim scroll div中，slim scroll正在添加溢出：隐藏如果你删除它div将无法滚动

这里有一个更新的笔

  
 
 
 
text 
 
text 
 
text 
 
text 
 
text 
 
text