bootstrap select 当有更多值并向上滚动时不显示搜索框的错误

Question

如果像

这样的值较少

 <select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                        <option>Mustard</option>
                        <option>Ketchup</option>
                        <option>Relish</option>
                    </select>

它向下滚动，它工作正常但是当有更多的值时

<select class="selectpicker form-control" multiple data-actions-box="true" data-live-search="true">
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option> <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Relish</option>
                        </select>

它的行为是这样的

无法搜索或select全部或deselect隐藏所有选项

有解决办法吗？

Answer 1

如文档中所述，如果您的 select 元素位于带有 overflow: hidden 的元素内，那么如果您有很多选项，它将无法滚动，

但它也提供了解决方案，您可以将 select 菜单附加到没有 overflow:hidden 样式的特定元素，例如data-container='body' 或 data-container=".main-content".

示例：

 <div style="overflow:hidden;">
  <select class="selectpicker" id="no-scroll">
    ...
  </select>
  <select class="selectpicker" data-container="body" id="can-scroll">
    ...
  </select>

 </div>

如果您的 parent 或 parent 的任何 parent 具有 css 作为 overflow:hidden 那么当您在 select 中有更多元素时元素然后滚动将不起作用，

如上例所示，select 元素中的 id='no-scroll' 滚动将不起作用，

但是如果你提供 data-container='body' 或任何 div class 像 data-container='.class-with-overflow-visible-property' 有 overflow:visible 属性那么它将起作用，

请参阅上面示例中的 select 元素 id='can-scroll' 滚动将按预期工作。

参考：https://developer.snapappointments.com/bootstrap-select/examples/#container

bootstrap select 当有更多值并向上滚动时不显示搜索框的错误

bootstrap select bug when there are more values and scrolling upwards it shows no search box

bootstrap-select

bootstrap-selectpicker

laravel-5.4