2

如果有更少的值，比如

 <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>

它的行为是这样的 没有搜索栏

不可搜索或全选或取消全选选项被隐藏

解决这个问题？

4

1 回答 1

1

如文档中所述，如果您的选择元素位于具有溢出：隐藏的元素内，那么如果您有很多选项，它将无法滚动，

但它也提供了解决方案，您可以将选择菜单附加到没有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>

在这里，如果您的父母或父母的任何父母有css，overflow:hidden那么当您在选择元素中有更多元素时，滚动将不起作用，

如上面示例中的滚动选择元素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

于 2019-07-01T11:26:38.563 回答