jQuery-Ausgewählt div fällt hinter Twitter Bootstrap-Akkordeon
Bin ich mit dem jQuery-Plug-in innerhalb einer Twitter-Bootstrap-Akkordeon. Das problem, das ich habe, ist, dass das dropdown-Menü der Plug-in wird angezeigt "unter" die div
des Akkordeon-Menü. Ich habe versucht, um die z-index
auf einen höheren Wert, aber das hat nicht den trick tun.
Habe ich ein Beispiel für mein problem: http://jsfiddle.net/8BAZY/1/
Wenn Sie klicken Sie auf die select
box werden Sie sehen, dass das Menü erscheint unter der div
. Wie kann ich die dropdown erscheinen ontop des Akkordeon-div, damit ich sehen kann all die Ergebnisse?
- dies ist zu einigen Konflikten mit twitter-bootstrap ... wenn Ihr Kommentar der js-bootstrap-Skript, die Sie nicht bekommen, diese ...
- Das problem ist, weil
.collapse
hatoverflow: hidden
. Offensichtlich absolut positionierten dropdown gewählt werden beschnitten. - Du hast Recht. Es scheint zu funktioniert, wenn ich entfernen Sie die
overflow: hidden
. Es scheint auch nicht zu geben unerwünschte Verhalten. Könnten Sie bitte fügen Sie als Antwort? - Ich machte eine ähnliche Frage mit dem gleichen problem: stackoverflow.com/questions/14043673/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mehr Infos über das gewählte Thema ist hier
https://github.com/harvesthq/chosen/issues/86
Einer Lösung auf der Basis der Vorschläge, die auf dieser Seite von PilotBob
http://jsfiddle.net/8BAZY/6/
Dank.
Lösung geschrieben von Sudhir arbeitete für mich, außer es hatte ein kleine Problem: Wenn Sie mehr als eine gewählte Steuerelement in das div-Element und erweitern Sie andere gewählt, während es einer ist bereits ausgebaut, der neue wird fallen hinter das Akkordeon. Dies ist, weil die erste dropdown-Liste setzt den überlauf auf hidden, nach 2 erweitert wird. Hier ist der fix.
Es ist nicht elegant, aber Sie können es so machen:
Dies sicherzustellen, wird es abgeschnitten, wenn Sie zusammengebrochen ist, und sichtbar, wenn angezeigt.
Ich hatte ein ähnliches Problem mit den Gewählten wählen Sie immer eine Breite von 0px, wenn ich es innerhalb eines Bootstrap collapse-element. Dies war leicht behoben werden, durch hinzufügen von
width:100%!important;
dem element.chosen-container
in meiner CSS.Ändern gewählt.min.css oder gewählt.css :
Zu :
Es funktioniert für mich.
Ich gerade behoben, die es mit der css-Zeile :
Für neue Versionen
für alte Versionen
Dieser arbeitete für mich "chosen1.3" und "bootstrap3.1", diese Lösung kann müssen einige überlegungen, aber ich habe nicht vor irgendwelche Probleme. Bitte Lesen Sie mehr https://github.com/harvesthq/chosen/issues/86
Ich dieses Problem beheben, indem Sie overflow: auto auf die Eltern