10

我在 Twitter Bootstrap 手风琴中使用 jQuery Chosen 插件。我遇到的问题是 Chosen 插件的下拉菜单出现在div手风琴菜单的“下方”。我试图将 设置z-index为更高的值，但这并没有成功。

我举了一个我的问题的例子：http: //jsfiddle.net/8BAZY/1/

如果单击该select框，您将看到菜单出现在div. 如何让下拉菜单出现在手风琴 div 的顶部，以便我可以看到所有结果？

4

10 回答 10

6

它并不优雅，但你可以这样做：

#collapseOne {
    overflow: hidden;
}
#collapseOne.in {
    overflow: visible;
}

这将确保它在折叠时被剪裁，并且在显示时可见。

于 2013-04-25T14:21:00.787 回答
6

Sudhir 发布的解决方案对我有用，除了它有一个小问题：当您在 div 中有多个选定控件并且您扩展其他选定控件而已经扩展了一个时，新控件将落后于手风琴。这是因为第一个下拉菜单在第二个展开后将溢出设置为隐藏。这是修复。

$(function () {
   fixChoosen();
});

function fixChoosen() {
   var els = jQuery(".chosen-select");
   els.on("chosen:showing_dropdown", function () {
      $(this).parents("div").css("overflow", "visible");
   });
   els.on("chosen:hiding_dropdown", function () {
      var $parent = $(this).parents("div");

      // See if we need to reset the overflow or not.
      var noOtherExpanded = $('.chosen-with-drop', $parent).length == 0;
      if (noOtherExpanded)
         $parent.css("overflow", "");
   });
}
于 2014-01-27T08:00:58.723 回答
6

关于这个选定问题的更多信息在这里 https://github.com/harvesthq/chosen/issues/86

基于 PilotBob 在该页面上给出的建议的一种解决方案 http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

谢谢。

于 2013-03-15T07:51:09.197 回答
5

问题是因为.collapse有overflow: hidden。显然绝对定位选择的下拉菜单将被剪裁。– dfsq 2 天前

于 2013-02-19T00:44:31.077 回答
3

当我在 Bootstrap 折叠元素中使用它时，我遇到了选择的宽度为 0px 的类似问题。这很容易通过添加到我的 CSSwidth:100%!important;中的元素来解决。.chosen-container

于 2015-02-20T00:28:59.213 回答
3

更改 selected.min.css 或 selected.css ：

.chosen-container{position:relative;

至 ：

.chosen-container{position: fixed;

这个对我有用。

于 2015-02-25T23:40:18.953 回答
2

我刚刚用 css 线修复了它：

div.chosen-container-active{
    z-index:9999;
}
于 2014-03-09T22:11:42.670 回答
1

对于新版本

.chosen-drop {
    z-index: 999999 !important;
}

对于旧版本

.chzn-drop {
    z-index: 999999 !important;
}

这对我“chosen1.3”和“bootstrap3.1”有用，这个解决方案可能需要一些考虑，但我没有遇到任何问题。请阅读更多https://github.com/harvesthq/chosen/issues/86

于 2015-02-18T07:34:44.840 回答
0

我通过在父级上放置溢出来解决这个问题：自动

于 2015-06-10T05:33:40.950 回答
0

简单地说，这对我有用：

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

我不是自己发明的，通过https://github.com/harvesthq/chosen/issues/86获得解决方案

于 2020-08-15T09:37:27.510 回答