Kiedy używam select2 (input) w modal bootstrap, nie mogę nic w nim wpisać. To jest jak niepełnosprawny? Poza modułem select2 działa dobrze.
Przykład działania: http://jsfiddle.net/byJy8/1/ kod:
<!-- 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>
i 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};
}
}
});
odpowiedzi:
tutaj możesz znaleźć szybką poprawkę
a oto „właściwa droga”: Select2 nie działa, gdy jest osadzony w modale bootstrap
dropdownParent
nie powinna ona znajdować się na głównym divie, ale głębiej, na przykład div z klasąmodal-content
, w przeciwnym razie pozycje rozwijane zostaną pomieszane podczas przewijania modalu.Odpowiedzi:
Ok, mam to do pracy.
zmiana
do
(usuń tabindex = "- 1" z modalu)
źródło
W przypadku Select2 v4:
Służy
dropdownParent
do dołączania menu rozwijanego do modalnego okna dialogowego, a nie do treści HTML.Spowoduje to dołączenie listy rozwijanej Select2, aby mieściła się w DOM modelu modalnego, a nie w treści HTML (domyślnie). Zobacz https://select2.org/dropdown#dropdown-placement
źródło
dropdownParent: $("#myModal")
, niedropdownParent: "#myModal"
.dropdownParent
katalogu głównego modalu, naprawdę lepiej jest wybrać ciało, inaczej dostaniesz naprawdę złe błędy pozycjonowania podczas przewijania. Ustawiłem moje na div z klasąmodal-content
i działa jak urok!Znalazłem rozwiązanie tego na github dla select2
https://github.com/ivaynberg/select2/issues/1436
W przypadku bootstrap 3 rozwiązaniem jest:
Bootstrap 4 zmienił nazwę tej
enforceFocus
metody na_enforceFocus
, więc zamiast tego musisz załatać:Wyjaśnienie skopiowane z powyższego linku:
źródło
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
Po prostu usuń
tabindex="-1"
i dodaj styloverflow:hidden
Oto przykład:
źródło
To jest moje rozwiązanie z select2 4.0.0. Wystarczy zastąpić css bezpośrednio poniżej importu select2.css. Upewnij się, że indeks Z jest większy niż twoje okno dialogowe lub modalne. Właśnie dodam 2000 do domyślnych. Ponieważ indeks Z moich okien dialogowych wynosi około 1000.
źródło
bootstrap.css
indeksie Z.popover
ustawiono wartość 1060, więc ta poprawka również działa. Podoba mi się, ponieważ jest prosty i rozwiązuje problem w taki sam sposób, w jaki problem został utworzony: indeks Z ustawiony w arkuszu stylów.Ustaw dropdownParent. Musiałem ustawić go na .modal-content w modalu, inaczej tekst skończyłby się na środku.
źródło
.modal-content
naprawdę robi różnicę. Dzięki za wskazanie 👍Odpowiedź, która dla mnie zadziałała, znajduje się tutaj: https://github.com/select2/select2-bootstrap-theme/issues/41
Nie wymaga również usuwania
tabindex
.źródło
Według oficjalnej dokumentacji select2 ten problem występuje, ponieważ moduły Bootstrap mają tendencję do kradzieży fokusu z innych elementów poza modalem.
Domyślnie Select2 dołącza menu rozwijane do elementu i jest uważane za „poza modalne”.
Zamiast tego dołącz menu rozwijane do samego modalu za pomocą ustawienia dropdownParent:
Patrz odniesienie: https://select2.org/trou Rozwiązywanie problemów / common-problems
źródło
Miałem ten sam problem, aktualizując
z-index
na.select2-container
powinno załatwić sprawę. Upewnij się, że twój modalz-index
jest niższy niż select2.Zaktualizowano: Jeśli powyższy kod nie działa poprawnie, usuń tabindexy z modalu, jak sugerował @breq
źródło
Po prostu użyj tego kodu w Document.read ()
źródło
Ten problem został rozwiązany Funkcja Single Jquery dla mnie działa
źródło
zmień plik select2.css
do
źródło
Aby lepiej zrozumieć, jak działają elementy tabindex, aby wypełnić zaakceptowaną odpowiedź:
od: Mozilla Devlopper Network
źródło
Jeśli masz problem z iPad klawiaturze, która ukrywa się modal bootstrap podczas klikania na select2 wejścia, można rozwiązać ten problem, dodając następującą regułę po inicjalizacji
select2
wejścia:Zaczerpnięte z https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475
EDYCJA: Jeśli opcje nie są wyświetlane poprawnie, musisz użyć
dropdownParent
atrybutu podczas inicjowaniaselect2
:Powodzenia (:
źródło
Na podstawie odpowiedzi @pymarco, którą napisałem, to rozwiązanie nie jest idealne, ale rozwiązuje problem focus2 i utrzymuje sekwencję tabulatorów wewnątrz modalnego
źródło
W moim przypadku miałem ten sam problem z dwoma modułami i wszystko zostało rozwiązane za pomocą:
Podobnie jak w numerze 41 projektu, powiedział użytkownik.
źródło
ten kod działa. Dziękuję Ci.
źródło
Okej, wiem, że jestem spóźniony na przyjęcie. Ale pozwól, że podzielę się z Tobą tym, co dla mnie zadziałało. Rozwiązania tabindex i z-index nie działały dla mnie.
Ustawienie elementu nadrzędnego elementu select działało zgodnie z typowymi problemami wymienionymi na stronie select2.
źródło
Jeśli używasz mobilnego wyskakującego okienka jquery, musisz przepisać funkcję _handleDocumentFocusIn:
źródło
Że ten sam problem z
select2
INbootstrap modal
, i roztwór w celu usunięciaoverflow-y: auto;
ioverflow: hidden
; z.modal-open
i.modal classes
Oto przykład użycia
jQuery
do usunięciaoverflow-y
:źródło
miałem ten problem wcześniej, używam yii2 i rozwiązałem go w ten sposób
źródło
Miałem częściowo związany problem w aplikacji, więc wstawię 2c.
Mam wiele modów z formularzami zawierającymi widżety select2. Otwarcie modułu A, a następnie innego modułu w module A, spowodowałoby zniknięcie widżetów select2 w module B i nie zainicjowanie.
Każdy z tych modułów ładował formularze za pośrednictwem ajax.
Rozwiązaniem było usunięcie formularzy z domku podczas zamykania modalu.
źródło
źródło
Rozwiązałem to ogólnie w moim projekcie, przeciążając
select2
funkcję-. Teraz sprawdzi, czy nie ma dropdownParent i czy funkcja jest wywoływana na elemencie, który ma rodzica typudiv.modal
. Jeśli tak, doda ten modal jako element nadrzędny menu rozwijanego.W ten sposób nie musisz go określać za każdym razem, gdy tworzysz pole select2-input.
źródło
Po prostu zaczynam działać, włączając select2.min.css
Wypróbuj
Mój modalny HTML Bootstrap 3 to
źródło
możesz ponownie wywołać wyzwalacz select2 w swoim $ (dokumencie)
źródło
aby użyć bootstrap 4.0 po stronie serwera (wbudowane dane ajax lub json), musisz dodać to wszystko:
a następnie, gdy modal jest otwarty, utwórz select2:
źródło
W moim przypadku to zrobiłem i działa. Używam pakietu, aby go załadować iw tym przypadku zadziałało to dla mnie
źródło