Saya memiliki masalah dalam membuat plunkr ini (select2 + angulat-ui) berfungsi.
http://plnkr.co/edit/NkdWUO?p=preview
Dalam pengaturan lokal, saya mendapatkan pekerjaan select2, tapi saya tidak bisa mengatur lebar seperti yang dijelaskan dalam dokumen . Terlalu sempit untuk digunakan.
Terima kasih.
EDIT: Tidak apa-apa plnkr itu, saya menemukan biola yang berfungsi di sini http://jsfiddle.net/pEFy6/
Sepertinya itu adalah perilaku select2 untuk runtuh ke lebar elemen pertama. Saya dapat mengatur lebar melalui bootstrap. class="input-medium"
Masih tidak yakin mengapa angular-ui tidak mengambil parameter konfigurasi.
Jawaban:
Anda perlu menentukan lebar atribut untuk diselesaikan untuk mempertahankan lebar elemen
sumber
Dalam kasus saya select2 akan terbuka dengan benar jika ada nol atau lebih pil.
Tetapi jika ada satu atau lebih pil, dan saya menghapus semuanya, itu akan menyusut menjadi lebar terkecil. Solusi saya sederhana:
sumber
resolve
tidak bekerja untuk saya - 100% `berhasil. itu setengah jam tanpa harapan mencari jawaban "diselesaikan". terima kasih :)Ini adalah pertanyaan lama tetapi info baru masih layak dikirim ...
Dimulai dengan Select2 versi 3.4.0 ada atribut
dropdownAutoWidth
yang memecahkan masalah dan menangani semua kasus aneh. Perhatikan itu tidak aktif secara default. Itu mengubah ukuran secara dinamis ketika pengguna membuat pilihan, itu menambah lebar untukallowClear
jika atribut itu digunakan, dan itu menangani teks placeholder juga.sumber
select2 V4.0.3
sumber
Dengan> 4.0 dari select2 yang saya gunakan
Yang lain ini tidak bekerja:
sumber
tambahkan metode container css di skrip Anda seperti ini:
itu akan mengatur lebar pilih Anda sama dengan lebar div Anda.
sumber
$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Menetapkan lebar untuk 'menyelesaikan' tidak berhasil untuk saya. Sebagai gantinya, saya menambahkan "width: 100%" ke pilih saya, dan memodifikasi css seperti ini:
.select2-offscreen {position: fixed !important;}
Ini adalah satu-satunya solusi yang bekerja untuk saya (versi saya 2.2.1). Pilih Anda akan mengambil semua tempat yang tersedia, itu lebih baik daripada menggunakan
class="input-medium"
dari bootstrap, karena pilih selalu tetap di wadah, bahkan setelah mengubah ukuran jendela (responsif)
sumber
Tambahkan opsi resolusi lebar ke fungsi select2 Anda
Setelah menambahkan CSS di bawah ini ke stylesheet Anda
Ini akan menyelesaikan masalah
sumber
Anda bisa coba seperti ini. Ini bekerja untuk saya
$("#MISSION_ID").select2();
Pada permintaan hide / show atau ajax, kita harus menginisialisasi ulang plugin select2
Sebagai contoh:
sumber
Solusi CSS lebih mudah terlepas dari select2
sumber
Pada proyek terbaru yang dibangun menggunakan Bootstrap 4 , saya telah mencoba semua metode di atas tetapi tidak ada yang berhasil. Pendekatan saya adalah dengan mengedit CSS perpustakaan menggunakan jQuery untuk mendapatkan 100% di atas meja.
Demo yang Bekerja
sumber