Bootstrap-select 使用数据容器时错放列表

Question

我有一个 html select 使用 Bootstrap-select 库。如果我没有定义 data-container 列表工作正常但我有重叠的问题。基本上，我在必须具有 overflow-y: auto; 的容器内渲染 select（没有 data-container）。当 select 试图在导航栏（主菜单）上方打开时，它会被重叠和剪切。请参阅 JSFiddle here（您必须强制将下拉菜单打开为 drop UP）。

对我来说正确的解决方案是定义一个 data-container。但是，一旦我这样做，列表就错位了。请参阅 JSFiddle here（您必须强制下拉菜单向下打开，而不是向上打开）。

另一个建议的解决方法是设置 data-container="body" 而不是我自己的容器 div，如前一个示例。这个 DID 解决了第一种情况，但它在其他情况下会中断。查看 this JSFiddle 并下拉列表“状态”（以便在下方打开），您将看到列表是如何放错位置的（但低于它应该在的位置），让下拉列表之间有一个很大的空白 space按钮。

请注意，我希望在所有地方都应用相同的解决方案，而不是我需要针对呈现列表的每个地方进行调整的解决方案。

Answer 1

继续讨论来自：https://github.com/silviomoreto/bootstrap-select/issues/1422

"a problem of overlapping" 是什么意思？ select 选项显示在标题上方这一事实对我来说不是用户体验问题：这是本机 select 的工作方式，用户仍然可以单击其他地方关闭菜单。

指定 data-container 只会限制该容器内的选项菜单，这可能不是您的最佳选择。此外，上面指定的问题表明此选项存在定位问题。

Answer 2

已在bootstrap-select的master分支修复，将在v1.11.0正式可用。参见 https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255。

Answer 3

只需添加位置：置顶；在 bootstrap-select.css 到下面 class

.bootstrap-select.btn-group .dropdown-menu {
    min-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: sticky;
}

Bootstrap-select 使用数据容器时错放列表

Bootstrap-select misplacing list when using data-container

javascript

css

twitter-bootstrap

bootstrap-select