jQuery選擇div落後於Twitter Bootstrap手風琴

我在Twitter Bootstrap手風琴中使用jQuery選擇插件。我遇到的問題是Chosen插件的下拉菜單出現在'手風琴菜單的div'下面。我試圖將z-index設置爲更高的值，但這並沒有成功。jQuery選擇div落後於Twitter Bootstrap手風琴

我做了我的問題的一個例子：http://jsfiddle.net/8BAZY/1/

如果你點擊select中，您會看到下div出現的菜單中。我如何讓下拉菜單出現在手風琴div的頂部，以便我可以看到所有結果？

來源

2013-02-16 w00

這與Twitter的引導一些衝突......如果你對此有何評論引導的js腳本，你沒有得到這個... – henser 2013-02-16 21:37:40

問題是因爲' .collapse'有'overflow：hidden'。顯然絕對定位選擇下拉將被剪輯。 – dfsq 2013-02-16 21:40:11

@dfsq你說得對。它似乎有效，當我刪除'overflow：hidden'。它似乎也沒有給出任何不需要的行爲。你能否將其添加爲答案？ – w00 2013-02-16 21:58:30

問題是因爲.collapse有overflow: hidden。顯然絕對定位選擇下拉將被剪裁。 - dfsq2天前對這個問題的選擇

來源

2013-02-19 00:44:31 Calvin

更多信息是這裏 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-15 07:51:09 Sudhir

FWIW，我轉移到使用select2代替。 – Sudhir 2013-04-03 10:52:52

這不是優雅，但你可以做這樣的：

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

這將確保它被倒塌的時候修剪，和可見的形式顯示。

來源

2013-04-25 14:21:00 tjdecke

由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-27 08:00:58

我添加了幾行，並使其適用於我。謝謝+1 – Si8 2015-10-08 14:03:22

我只是用CSS線固定它：

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

來源

2014-03-09 22:11:42 Javases

對我來說真的不適用 – SearchForKnowledge 2014-11-13 14:27:39

新版本

.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-18 07:34:44

當我在Bootstrap摺疊元素中使用它時，我遇到了類似的問題，選擇了寬度爲0px的選擇。這很容易通過在我的CSS中添加width:100%!important;到元素.chosen-container來解決。

來源

2015-02-20 00:28:59 Glen

我有同樣的問題，但在引導選項卡內。您的解決方案適用於我。謝謝。 – 2017-03-21 16:08:09

更改chosen.min.css或選擇。CSS：

.chosen-container{position:relative;

要：

.chosen-container{position: fixed;

這對我的作品。

來源

2015-02-25 23:40:18 EngineerCoder

不錯，這個工作對我來說，謝謝。 – Offboard 2015-12-03 02:01:25

我解決這個問題通過把溢出：汽車父

來源

2015-06-10 05:33:40 yodann

jQuery選擇div落後於Twitter Bootstrap手風琴

回答

相關問題