Chosen: In einem Bootstrap 3.x-Dialogfeld wurde das Styling nicht richtig ausgewählt.

Erstellt am 31. Mai 2017 · 6Kommentare · Quelle: harvesthq/chosen

Fassen Sie Ihr Problem hier zusammen.
In einem Bootstrap 3.x-Dialogfeld wurde das Styling nicht richtig ausgewählt.

Schritte zum Reproduzieren

CSS von Bootstrap laden
laden einen Dialog laden.
öffne den Dialog

Bitte verlinken Sie außerdem auf eine funktionierende Demo, die das Problem zeigt, damit wir versuchen können, es zu reproduzieren. Sie können diese Vorlage als Grundlage verwenden. Bestätigen Sie alternativ, dass die Demoseite von Chosen das Problem anzeigt.

Erwartetes Verhalten

um das schön gestaltete und durchsuchbare Dropdown anzuzeigen

Tatsächliches Verhalten

Bitte schön

Umfeld

Ausgewählte Version :
gewählt_v1.6.2/
jQuery- oder Prototyp-Version :
/jquery/1.11.2/jquery.min.js'
Browser und Version :
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0
Betriebssystem und Version :
Windows 10

Weitere Informationen

n / A

Quelle

lordspace

Hilfreichster Kommentar

Ok, nur um ein Update dazu hinzuzufügen.
Wenn ich die Breite bei der Initialisierungsmethode übergebe, funktioniert alles ohne den obigen Hack.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace am 17. Juni 2017

👍3 ❤1

Alle 6 Kommentare

Die gewählte Version 1.6.2 ist nicht die neueste Version – haben Sie Ihr Problem immer noch mit der neuesten veröffentlichten Version ?

tjschuck am 31. Mai 2017

Ich werde dafür sorgen, dass ich es habe und lasse es Sie wissen.

lordspace am 3. Juni 2017

Ja, das Problem besteht auch in der neuesten Version 1.7 immer noch.

Ich habe einige Stackoverflow-Themen überprüft und diesen Fix gefunden.

$('.modal').filter('[class*=_dialog]').on('show.bs.modal', function () {
                // This makes the dialog expand when shown in a bootstrap dlg
                $(this).find('.chosen-container').css({width: "100%"});
            });

Die App ist benutzerdefiniert und für einen Kunden bestimmt und kann keinen Link dazu bereitstellen.

lordspace am 5. Juni 2017

Ok, nur um ein Update dazu hinzuzufügen.
Wenn ich die Breite bei der Initialisierungsmethode übergebe, funktioniert alles ohne den obigen Hack.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace am 17. Juni 2017

👍3 ❤1

Danke für den Hack @lordspace. Ich habe ziemlich lange gebraucht, um deine Lösung zu finden.

Ich bin mir nicht sicher, warum dieses Problem im Repo "bootstrap-chosen" geschlossen wurde (https://github.com/alxlit/bootstrap-chosen/issues/54).

pihug12 am 21. Aug. 2017

Kein Problem. Vielleicht habe ich es geschlossen in der Annahme, dass es kein Fehler ist, wenn es über Optionen behoben werden kann, aber wenn ich jetzt darüber nachdenke, sollte es sofort funktionieren.

lordspace am 21. Aug. 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen