laravel-5.4 - 当有更多值并向上滚动时引导选择错误，它不显示搜索框

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>

它的行为是这样的

没有可搜索或全选或取消选择所有选项被隐藏

解决这个问题？

Answer 1

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

但它也提供了解决方案，您可以将选择菜单附加到没有 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 元素中有更多元素时，滚动将不起作用，

如上例所示，在带有 id='no-scroll' 的选择元素中滚动将不起作用，

但是如果您提供 data-container='body' 或任何 div 类，例如 data-container='.class-with-overflow-visible-property'有 overflow:visible 属性然后它会工作，

在上面的示例中，使用 id='can-scroll' 滚动的选择元素将按预期工作。

引用:https://developer.snapappointments.com/bootstrap-select/examples/#container