Question

我使用Bootstrap-select库进行html选择。如果我没有定义data-container，列表工作正常，但我有重叠的问题。基本上，我在一个必须有data-container的容器中渲染select（没有overflow-y: auto;）。当选择尝试在导航栏（主菜单）上方打开时，它会重叠并剪切。请参阅JSFiddle here（您必须强制下拉列表以放下方式打开）。

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

另一个建议的解决方法是设置data-container="body"而不是我自己的容器div，如上例所示。这个DID解决了第一个场景，但它打破了其他情况。请参阅this JSFiddle并下拉列表“状态”（以便在下面打开），您将看到列表是如何放错地方（但在它应该的位置下方），在下拉按钮之间留出一个很大的空白区域。

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

提前致谢，

Answer 1

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

你是什么意思＆＃34;重叠的问题＆＃34; ？选择选项显示在标题上的事实对我来说不是一个UX问题：这是本机选择的工作方式，用户仍然可以点击其他地方来关闭菜单。

指定数据容器只会限制该容器内的选项菜单，这可能不适合您的情况。此外，上面指出的问题表明此选项存在定位问题。

Answer 2

这已在bootstrap-select的主分支中修复，并将在v1.11.0中正式提供。请参阅https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255。

Answer 3

只需添加位置：粘性;在bootstrap-select.css中到下面的类

.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错误列表

3 个答案: