Selectbox'ın genişliği, Select2

Question

'da etiket silme işleminde küçülüyor Bir etiketleme kutusu yapmak için Select2'yi kullanıyorum. Aşağıdaki HTML kodu eklendi:

<select id="tags" multiple=""> 
    <option value="tag_1">Tag1</option> 
    <option value="tag_2">Tag2</option> 
    <option value="tag_3">Tag3</option> 
</select> 

ve bu JS kullanılır:

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
    }); 
}); 

problemdir: metin kutusu ilk yükleme normal bir genişliğe sahiptir. Bir etiket ekledikten sonra düzgün görüntülenecektir. Ama eğer backspace üzerine tıklarsam veya silmek için etiketin x'inin üzerine tıklarsam, metin kutusu onun içinde yaklaşık 5px'e küçülür. Neyi yanlış yapıyorum? Ayrıca twitter bootstrap kullanıyorum, bazı bağımlılık var mı?

Answer 1

Aynı sorunu yaşıyor ancak yalnızca Bootstrap ile. Bunu işe koyuldum. Bunlar Select2 tarafından oluşturulduğunu bulduğum sınıflar.

#s2id_groupSelect, .select2-input, .select2-container, .select2-search-field, .select2-choices { 
width: 358px; 
} 

Genişliği, ihtiyacınız olan her şeye ayarlayın.

Answer 2

select2 başlatma koduna width seçeneğini eklemeyi deneyin.

$("#tags").select2({ width: '100%' }); 

Answer 3

Bu basit bir düzeltme işlemidir. Sadece bu şekilde kodunu değiştirmek:

containerCssClass: 'mySpecialClass' 

Sonra genişliği işlemek için atanan bazı özel CSS var: Ayrıca aşağıdaki öznitelik ekleyerek özel CSS ayarlayabilirsiniz

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
     width: '100%', 
    }); 
}); 

.

.mySpecialClass { 
    width: 100%; 
} 

Her ikisi de işe yarayacak!

Answer 4

Aynı sorundan daha çok arama yaptım google'dan doğru çözümü bulamıyorum, bugün bazı girişimlerden sonra sorunumu çözdüm. WordPress yönetici klasöre

Aşağıdaki kod içinde load-styles.php den .menu ul menüsünde sorun seçme kutusunu uyacak şekilde seçin kutunun içinde input metin alanını azaltmak ve etiketleri çıkardıktan sonra çekmez.

bu doğru benimle iştir deneyin

.menu ul { 
    width: 97%; 
}