Ketika saya menggunakan select2 (input) dalam modal bootstrap, saya tidak bisa mengetikkan apa pun ke dalamnya. Ini seperti dinonaktifkan? Di luar modal, select2 berfungsi dengan baik.
Contoh kerja: http://jsfiddle.net/byJy8/1/ kode:
<!-- 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>
dan 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};
}
}
});
jawaban:
di sini Anda dapat menemukan perbaikan cepat
dan di sini adalah 'jalan yang benar': Select2 tidak berfungsi ketika tertanam dalam modal bootstrap
dropdownParent
seharusnya tidak berada di root div, tetapi lebih dalam, misalnya div dengan kelasmodal-content
, jika tidak posisi dropdown akan kacau ketika menggulir modal.Jawaban:
Ok, saya harus bekerja.
perubahan
untuk
(hapus tabindex = "- 1" dari modal)
sumber
Untuk Select2 v4:
Gunakan
dropdownParent
untuk melampirkan dropdown ke dialog modal, daripada badan HTML.Ini akan melampirkan dropdown Select2 sehingga jatuh dalam DOM modal daripada ke tubuh HTML (default). Lihat https://select2.org/dropdown#dropdown-placement
sumber
dropdownParent: $("#myModal")
, tidakdropdownParent: "#myModal"
.dropdownParent
ke akar modal, itu memang lebih baik untuk memilih tubuh, jika tidak, Anda mendapatkan bug positioning yang sangat buruk ketika menggulir. Saya mengatur milik saya ke div dengan kelasmodal-content
dan itu bekerja seperti pesona!Saya menemukan solusi untuk ini di github untuk select2
https://github.com/ivaynberg/select2/issues/1436
Untuk bootstrap 3, solusinya adalah:
Bootstrap 4 mengubah nama
enforceFocus
metode menjadi_enforceFocus
, jadi Anda harus menambal itu:Penjelasan disalin dari tautan di atas:
sumber
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
Hapus
tabindex="-1"
dan tambahkan gayaoverflow:hidden
Berikut ini sebuah contoh:
sumber
Ini adalah solusi saya dengan select2 4.0.0. Cukup timpa css tepat di bawah impor select2.css. Pastikan z-index lebih besar dari dialog atau modal Anda. Saya hanya menambahkan 2000 pada yang default. Karena indeks-dialog saya sekitar 1000.
sumber
bootstrap.css
indeks-z.popover
diatur ke 1060 sehingga perbaikan ini juga berfungsi. Saya suka karena ini sederhana dan menyelesaikan masalah dengan cara yang sama dengan masalah yang dibuat: z-index diatur dalam style sheet.Atur dropdownParent. Saya harus meletakkannya di .modal-content dalam modal atau teks akan berakhir terpusat.
sumber
.modal-content
Benar - benar membuat perbedaan. Terima kasih telah menunjukkan 👍Jawaban yang berhasil bagi saya ditemukan di sini: https://github.com/select2/select2-bootstrap-theme/issues/41
Juga tidak perlu menghapus
tabindex
.sumber
Menurut dokumentasi select2 resmi masalah ini terjadi karena moda Bootstrap cenderung mencuri fokus dari elemen lain di luar modal.
Secara default, Select2 menempel menu dropdown ke elemen dan itu dianggap "di luar modal".
Alih-alih melampirkan dropdown ke modal itu sendiri dengan pengaturan dropdownParent:
Lihat referensi: https://select2.org/troubleshooting/common-problems
sumber
Saya memiliki masalah yang sama, memperbarui
z-index
untuk.select2-container
harus melakukan trik. Pastikan modal Andaz-index
lebih rendah dari select2's.Diperbarui: Jika kode di atas tidak berfungsi dengan baik, hapus juga tabindex dari modal Anda seperti yang disarankan @breq
sumber
Jus menggunakan kode ini di Document.read ()
sumber
Masalah Ini Berfungsi Untuk Saya Fungsi Single Jquery
sumber
ubah file select2.css
untuk
sumber
Untuk lebih memahami bagaimana elemen tabindex bekerja untuk menyelesaikan jawaban yang diterima:
dari: Jaringan Mozilla Devlopper
sumber
Jika Anda memiliki masalah dengan iPad Keyboard yang menyembunyikan satu modal bootstrap sambil mengklik pada select2 masukan, Anda dapat mengatasi ini dengan menambahkan aturan berikut setelah inisialisasi dari
select2
masukan:Diambil dari https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475
EDIT: Jika opsi Anda tidak ditampilkan dengan benar, Anda perlu menggunakan
dropdownParent
atribut saat menginisialisasiselect2
:Semoga berhasil (:
sumber
Berdasarkan @pymarco jawaban saya menulis solusi ini, itu tidak sempurna tetapi menyelesaikan masalah fokus select2 dan mempertahankan urutan tab bekerja di dalam modal
sumber
Dalam kasus saya, saya memiliki masalah yang sama dengan dua modals dan semua diselesaikan dengan menggunakan:
Seperti dalam masalah proyek # 41 kata pengguna.
sumber
kode ini berfungsi. Terima kasih.
sumber
Oke, saya tahu saya terlambat ke pesta. Tetapi izinkan saya berbagi dengan Anda apa yang berhasil bagi saya. Tabindex dan solusi z-index tidak berfungsi untuk saya.
Pengaturan induk dari elemen pilih berfungsi sesuai dengan masalah umum yang terdaftar di situs select2.
sumber
Jika Anda menggunakan popup seluler jquery, Anda harus menulis ulang fungsi _handleDocumentFocusIn:
sumber
Saya memiliki masalah yang sama dengan
select2
dibootstrap modal
, dan solusinya adalah menghapusoverflow-y: auto;
danoverflow: hidden
; dari.modal-open
dan.modal classes
Berikut adalah contoh penggunaan
jQuery
untuk menghapusoverflow-y
:sumber
saya punya masalah ini sebelumnya, saya menggunakan yii2 dan saya menyelesaikannya dengan cara ini
sumber
Saya punya masalah semi-terkait dalam suatu aplikasi jadi saya akan memasukkan 2c saya.
Saya memiliki banyak modals dengan formulir yang berisi widget select2. Membuka modal A, lalu modal lain di dalam modal A, akan menyebabkan widget select2 di dalam modal B hilang dan gagal diinisialisasi.
Masing-masing modalnya memuat formulir melalui ajax.
Solusinya adalah menghapus formulir dari dom ketika menutup modal.
sumber
sumber
Saya memecahkan ini secara umum dalam proyek saya dengan kelebihan
select2
-fungsi. Sekarang ia akan memeriksa apakah tidak ada dropdownParent dan apakah fungsinya dipanggil pada elemen yang memiliki induk dari tipe tersebutdiv.modal
. Jika demikian, itu akan menambahkan modal itu sebagai induk untuk dropdown.Dengan cara ini, Anda tidak perlu menentukannya setiap kali Anda membuat kotak select2-input-input.
sumber
Saya hanya membuatnya bekerja dengan memasukkan select2.min.css
Cobalah
Modal html saya untuk bootstrap 3 adalah
sumber
Anda dapat memanggil pemicu select2 lagi di dalam $ (dokumen) Anda
sumber
untuk menggunakan bootstrap 4.0 dengan sisi server (ajax atau json data inline), Anda perlu menambahkan semua ini:
dan kemudian ketika modal terbuka, buat select2:
sumber
Dalam kasus saya, saya melakukan ini dan berhasil. Saya menggunakan bundel untuk memuatnya dan dalam hal ini berfungsi untuk saya
sumber