jQuery Chosen div 落后于 Twitter Bootstrap 手风琴

Posted 2023-05-07

【中文标题】jQuery Chosen div 落后于 Twitter Bootstrap 手风琴

【英文标题】：jQuery Chosen div falls behind Twitter Bootstrap accordion

【发布时间】：2013-02-01 15:30:27

【问题描述】：

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

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

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

【问题讨论】：

这与 twitter-bootstrap 有冲突...如果您评论 bootstrap 的 js 脚本，您不会得到这个...

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

@dfsq 你是对的。当我删除overflow: hidden 时，它似乎有效。它似乎也没有给出任何不需要的行为。您能否将其添加为答案？

我用同样的问题做了一个类似的问题：***.com/questions/14043673/…

【参考方案1】：

有关此选定问题的更多信息在这里 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", "");
        );
);

谢谢。

【讨论】：

FWIW，我转而使用 select2。

【参考方案2】：

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

#collapseOne 
    overflow: hidden;

#collapseOne.in 
    overflow: visible;

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

【参考方案3】：

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", "");
   );

【讨论】：

我又添加了几行，让它对我有用。谢谢+1

【参考方案4】：

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

【参考方案5】：

当我在 Bootstrap 折叠元素中使用选择的选择时，我遇到了类似的问题，宽度为 0px。通过将 width:100%!important; 添加到我的 CSS 中的元素 .chosen-container 可以轻松解决此问题。

【讨论】：

我遇到了同样的问题，但在引导选项卡中。你的解决方案对我有用。谢谢。

【参考方案6】：

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

.chosen-containerposition:relative;

收件人：

.chosen-containerposition: fixed;

它对我有用。

【参考方案7】：

我刚刚用 css 线修复了它：

div.chosen-container-active
    z-index:9999;

【参考方案8】：

对于新版本

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

旧版本

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

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

【参考方案9】：

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

【参考方案10】：

这对我有用：

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

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