jQuery Chosen div fällt hinter Twitter Bootstrap Akkordeon

Question

Ich benutze das jQuery Chosen Plugin in einem Twitter Bootstrap Akkordeon. Das Problem, das ich habe, ist, dass das Dropdown-Menü des gewählten Plugins "unter" div des Akkordeon-Menüs erscheint. Ich habe versucht, die z-index auf einen höheren Wert zu setzen, aber das hat nicht den Trick gemacht.

ich ein Beispiel meines Problems gemacht: http://jsfiddle.net/8BAZY/1/

Wenn Sie auf der Sie select Box klicken werden sehen, dass das Menü unter dem div erscheint. Wie kann ich das Drop-Down-Menü oben auf dem Akkordeon-Div anzeigen lassen, damit ich alle Ergebnisse sehen kann?

Answer 1

Das Problem ist, weil .collapseoverflow: hidden hat. Offensichtlich absolut positionierte gewählte Dropdown wird abgeschnitten werden. - dfsq 2 Tage vor

Answer 2

Weitere Informationen zu diesem ausgewählten Thema hier ist https://github.com/harvesthq/chosen/issues/86

Eine Lösung auf der Grundlage der Vorschläge auf dieser Seite von PilotBob gegeben 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", ""); 
     }); 
}); 

Dank.

Answer 3

Es ist nicht elegant, aber man kann es wie folgt tun:

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

Dies wird sicherstellen, dass es abgeschnitten wird, wenn zusammengebrochen, und dann sichtbar, wenn gezeigt.

Answer 4

Lösung geschrieben von Sudhir arbeitete für mich, außer es hatte ein kleines Problem: Wenn Sie mehr als eine ausgewählte Kontrolle innerhalb der div und erweitern andere gewählt, während es bereits erweitert ist, wird die neue hinter dem Akkordeon fallen. Dies liegt daran, dass das erste Dropdown-Menü den Überlauf auf "Versteckt" setzt, nachdem der zweite erweitert wurde. Hier ist die Lösung.

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

Answer 5

ich es nur mit der CSS-Linie festgelegt:

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

Answer 6

Für neue Versionen

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

für alte Versionen

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

Das ist für mich „chosen1 gearbeitet. 3 "und" Bootstrap3.1 ", diese Lösung kann brauchen einige Überlegungen, aber ich hatte keine Probleme. Bitte lesen Sie mehr https://github.com/harvesthq/chosen/issues/86

Answer 7

Ich hatte ein ähnliches Problem mit der gewählten wählen Sie erhalten eine Breite von 0px, wenn ich es in einem Bootstrap-Kollaps-Element verwendet wurde. Dies wurde einfach durch Hinzufügen von width:100%!important; zu dem Element .chosen-container in meinem CSS behoben.

Answer 8

Change gewählte.min.css oder gewählt.CSS:

.chosen-container{position:relative; 

An:

.chosen-container{position: fixed; 

Es funktioniert für mich.

Answer 9

ich dieses Problem beheben, indem Überlauf setzen: Auto auf dem übergeordneten