Wenn ich eine select2 (Eingabe) im Bootstrap-Modal verwende, kann ich nichts eingeben. Es ist wie behindert? Außerhalb des Modals funktioniert select2 einwandfrei.
Arbeitsbeispiel: http://jsfiddle.net/byJy8/1/ code:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
und js:
$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
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
dropdownParent
sollte nicht auf dem Root-Div liegen, sondern tiefer, zum Beispiel das Div mit Klassemodal-content
, sonst werden die Dropdown-Positionen beim Scrollen des Modals durcheinander gebracht.Antworten:
Ok, ich muss es funktionieren lassen.
Veränderung
zu
(entferne tabindex = "- 1" aus modal)
quelle
Für Select2 v4:
Verwenden Sie
dropdownParent
diese Option, um das Dropdown-Menü an den modalen Dialog und nicht an den HTML-Text anzuhängen.Dadurch wird das Select2-Dropdown-Menü angehängt, sodass es in das DOM des Modals und nicht in den HTML-Body (Standard) fällt. Siehe https://select2.org/dropdown#dropdown-placement
quelle
dropdownParent: $("#myModal")
nicht verwendendropdownParent: "#myModal"
.dropdownParent
Wurzel des Modals. Es ist in der Tat besser, den Körper auszuwählen, da sonst beim Scrollen wirklich schlechte Positionierungsfehler auftreten. Ich setze meine mit Klasse auf die Divmodal-content
und es funktioniert wie ein Zauber!Ich habe auf github für select2 eine Lösung dafür gefunden
https://github.com/ivaynberg/select2/issues/1436
Für Bootstrap 3 lautet die Lösung:
Bootstrap 4 hat die
enforceFocus
Methode in umbenannt_enforceFocus
, daher müssen Sie diese stattdessen patchen:Erklärung vom obigen Link kopiert:
quelle
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
Einfach entfernen
tabindex="-1"
und Stil hinzufügenoverflow:hidden
Hier ist ein Beispiel:
quelle
Dies ist meine Lösung mit select2 4.0.0. Überschreiben Sie einfach das CSS direkt unter dem Import von select2.css. Bitte stellen Sie sicher, dass der Z-Index größer ist als Ihr Dialog oder Modal. Ich füge nur 2000 zu den Standard hinzu. Weil der Z-Index meiner Dialoge ungefähr 1000 ist.
quelle
bootstrap.css
Z-Index von.popover
ist auf 1060 gesetzt, damit dieser Fix auch funktioniert. Ich mag es, weil es einfach ist und das Problem auf die gleiche Weise löst, wie das Problem erstellt wurde: Z-Index in einem Stylesheet.Legen Sie das Dropdown-Element fest. Ich musste es auf .modal-content innerhalb des Modals setzen, sonst würde der Text zentriert enden.
quelle
.modal-content
wirklich einen Unterschied. Vielen Dank für den Hinweis 👍Die Antwort, die für mich funktioniert hat, finden Sie hier: https://github.com/select2/select2-bootstrap-theme/issues/41
Auch muss das nicht entfernt werden
tabindex
.quelle
Laut der offiziellen select2-Dokumentation tritt dieses Problem auf, weil Bootstrap-Modale dazu neigen, anderen Elementen außerhalb des Modals den Fokus zu stehlen.
Standardmäßig fügt Select2 das Dropdown-Menü dem Element hinzu und es wird als "außerhalb des Modals" betrachtet.
Fügen Sie stattdessen das Dropdown-Menü mit der Einstellung dropdownParent an das Modal selbst an:
Siehe Referenz: https://select2.org/troubleshooter/common-problems
quelle
Ich hatte das gleiche Problem, ein Update
z-index
für.select2-container
sollte den Trick machen.z-index
Stellen Sie sicher, dass Ihr Modal niedriger ist als das von select2.Aktualisiert: Falls der obige Code nicht richtig funktioniert, entfernen Sie auch tabindexes aus Ihrem Modal, wie von @breq vorgeschlagen
quelle
Verwenden Sie diesen Code nur in Document.read ()
quelle
Dieses Problem hat sich bei der Arbeit mit der Single Jquery-Funktion gelöst
quelle
Ändern Sie die Datei select2.css
zu
quelle
Nur um besser zu verstehen, wie Tabindex-Elemente funktionieren, um die akzeptierte Antwort zu vervollständigen:
von: Mozilla Devlopper Network
quelle
Wenn Sie ein Problem mit dem haben iPad - Tastatur , die sich verstecken , die Bootstrap - modal , während auf dem Klick select2 Eingang, können Sie dies beheben , indem Sie die folgende Regel Zugabe nach der Initialisierung des
select2
Eingangs:Entnommen aus https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475
BEARBEITEN: Wenn Ihre Optionen nicht richtig angezeigt werden, müssen Sie das
dropdownParent
Attribut beim Initialisieren verwendenselect2
:Viel Glück (:
quelle
Basierend auf der Antwort von @pymarco habe ich diese Lösung geschrieben. Sie ist nicht perfekt, löst jedoch das Select2-Fokusproblem und behält die Tab-Sequenz bei, die innerhalb von Modal funktioniert
quelle
In meinem Fall hatte ich das gleiche Problem mit zwei Modalen und alles wurde gelöst mit:
Wie in der Projektausgabe Nr. 41 sagte ein Benutzer.
quelle
Dieser Code funktioniert. Vielen Dank.
quelle
Okay, ich weiß, dass ich zu spät zur Party komme. Aber lassen Sie mich mit Ihnen teilen, was für mich funktioniert hat. Die Tabindex- und Z-Index-Lösungen haben bei mir nicht funktioniert.
Das Festlegen des übergeordneten Elements des select-Elements funktionierte gemäß den allgemeinen Problemen, die auf der select2-Site aufgeführt sind.
quelle
Wenn Sie jquery mobile popup verwenden, müssen Sie die Funktion _handleDocumentFocusIn neu schreiben:
quelle
Ich habe das gleiche Problem mit dem
select2
Inbootstrap modal
, und die Lösung bestand darin, dasoverflow-y: auto;
und zu entfernenoverflow: hidden
. von.modal-open
und.modal classes
Hier ist das Beispiel für die
jQuery
Entfernung vonoverflow-y
:quelle
Ich hatte dieses Problem schon einmal, ich benutze yii2 und ich habe es auf diese Weise gelöst
quelle
Ich hatte ein halbbezogenes Problem in einer Anwendung, also werde ich mein 2c einfügen.
Ich habe mehrere Modalitäten mit Formularen, die select2-Widgets enthalten. Das Öffnen von Modal A und eines weiteren Modals in Modal A würde dazu führen, dass select2-Widgets in Modal B verschwinden und nicht initialisiert werden können.
Jedes dieser Modalitäten lud die Formulare über Ajax.
Die Lösung bestand darin, die Formulare beim Schließen eines Modals aus dem Dom zu entfernen.
quelle
quelle
Ich habe dies allgemein in meinem Projekt gelöst, indem ich die
select2
-funktion überladen habe . Jetzt wird geprüft, ob kein dropdownParent vorhanden ist und ob die Funktion für ein Element aufgerufen wird, das ein übergeordnetes Element des Typs hatdiv.modal
. In diesem Fall wird dieses Modal als übergeordnetes Element für die Dropdown-Liste hinzugefügt.Auf diese Weise müssen Sie es nicht jedes Mal angeben, wenn Sie ein select2-Eingabefeld erstellen.
quelle
Ich bekomme es einfach zum Laufen , indem ich select2.min.css einbinde
Probieren Sie es aus
Mein modales HTML von Bootstrap 3 ist
quelle
Sie können den select2-Trigger in Ihrem $ (Dokument) erneut aufrufen.
quelle
Um Bootstrap 4.0 serverseitig zu verwenden (Ajax- oder JSON-Daten inline), müssen Sie Folgendes hinzufügen:
Wenn dann Modal geöffnet ist, erstellen Sie select2:
quelle
In meinem Fall habe ich das gemacht und es funktioniert. Ich benutze Bundle, um es zu laden und in diesem Fall hat es für mich funktioniert
quelle