Select2 funktioniert nicht, wenn es in einem Bootstrap-Modal eingebettet ist

Question

Select2 funktioniert nicht, wenn es in einem Bootstrap-Modal eingebettet ist

Gefragt el 28 de August, 2013: Wann wurde die Frage gestellt
379463 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Wenn ich ein select2 (Eingabe) in einem Bootstrap-Modal verwende, kann ich nichts eingeben. Ist es deaktiviert? Außerhalb des Modals funktioniert select2 einwandfrei.

Bildbeschreibung hier eingeben

Arbeitsbeispiel: http://jsfiddle.net/byJy8/1/ code:

        ×
        Panel

            Numer

        Schließen
        Änderungen speichern

JS

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // Suchbegriff
                col: 'vdn'
            };
        },
        results: function (data) { // Die Ergebnisse in das von Select2 erwartete Format parsen.
            // Da wir benutzerdefinierte Formatierungsfunktionen verwenden, müssen wir die entfernten JSON-Daten nicht ändern
            return {results: data};
        }
    }
});

Antworten:

hier finden Sie eine schnelle Lösung

und hier ist 'der richtige Weg': Select2 funktioniert nicht, wenn es in ein Bootstrap-Modal eingebettet ist

Gefragt el 28 de August, 2013 von breq

Answer 1

5 Antworten

Answer 2

44voto

Diluka W Punkte 854

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

Dies ist meine Lösung mit select2 4.0.0. Überschreiben Sie einfach das CSS direkt unter dem select2.css-Import. Stellen Sie sicher, dass der z-Index größer ist als Ihr Dialog oder Modal. Ich füge einfach 2000 zu den Standardwerten hinzu, da die z-Indizes meiner Dialoge etwa bei 1000 liegen.

Beantwortet el 6 de Kann, 2015 von Diluka W (854 Punkte )

Answer 3

19voto

Ashraf Slamang Punkte 828

Die Antwort, die für mich funktioniert hat, finden Sie hier: https://github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Erfordert auch nicht das Entfernen des tabindex.

Beantwortet el 29 de November, 2017 von Ashraf Slamang (828 Punkte )

Answer 4

17voto

Juan Antonio Punkte 2170

In meinem Fall hatte ich das gleiche Problem mit zwei Modals und alles wurde gelöst mit:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

Wie im Projektissue #41 von einem Benutzer gesagt wurde.

Beantwortet el 10 de Oktober, 2019 von Juan Antonio (2170 Punkte )

Answer 5

14voto

Anas Punkte 1115

Laut der offiziellen Select2-Dokumentation tritt dieses Problem auf, weil Bootstrap-Modals dazu neigen, den Fokus von anderen Elementen außerhalb des Modals zu stehlen.

Standardmäßig hängt Select2 das Dropdown-Menü am <body>-Element an und wird als "außerhalb des Modals" betrachtet.

Hängen Sie stattdessen das Dropdown-Menü am Modal selbst mit der dropdownParent-Einstellung an:

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

Siehe Referenz: https://select2.org/troubleshooting/common-problems

Beantwortet el 20 de Marsch, 2019 von Anas (1115 Punkte )

Answer 6

13voto

hhk Punkte 498

Ich hatte dasselbe Problem, das Aktualisieren von z-index für .select2-container sollte das Problem lösen. Stellen Sie sicher, dass der z-index Ihres Modals niedriger ist als der von select2.

.select2-container {
    z-index: 99999;
}

Aktualisiert: Falls der obige Code nicht ordnungsgemäß funktioniert, entfernen Sie auch tabindexes aus Ihrem Modal wie von @breq vorgeschlagen.

Beantwortet el 18 de Kann, 2017 von hhk (498 Punkte )

Select2 funktioniert nicht, wenn es in einem Bootstrap-Modal eingebettet ist

JS

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Select2 funktioniert nicht, wenn es in einem Bootstrap-Modal eingebettet ist

JS

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: