mengatur lebar input select2 (melalui arahan Angular-ui)

151

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.

masukkan deskripsi gambar di sini

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.

bsr
sumber
Bisakah Anda lebih spesifik sejauh apa yang sudah Anda coba? Pustaka yang dipilih (di mana select2 didasarkan) akan menghasilkan lebar berdasarkan lebar yang disediakan dalam HTML / CSS.
Adam Grant

Jawaban:

216

Anda perlu menentukan lebar atribut untuk diselesaikan untuk mempertahankan lebar elemen

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
Diego Alvarez
sumber
7
$ ("# myselect"). select2 ({placeholder: 'Pilih Negara', lebar: '192px'}); memecahkan masalah saya dengan IE dan tidak berpengaruh pada FF dan Chrome! Terima kasih!
Adrian P.
Iya. Saya juga bertanya kepada penulis github.com/godbasin/vue-select2/issues/11
shinriyo
232

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:

$("#myselect").select2({ width: '100%' });      
portforwardpodcast
sumber
7
jawaban terbaik jika menggunakan select2 versi 4.0.0
Steve
1
mengapa ini lebih baik daripada $ ("# myselect"). select2 ({width: 'resol'}); ? (tampaknya sama)
Ricardo Vigatti
1
@ RicardoVigatti: width: 'resol' hanya berfungsi satu kali saat memuat halaman tetapi tidak pada saat mengubah ukuran. Jika Anda menggunakan desain responsif, itu tidak berhasil
Fabian Schöner
1
resolvetidak bekerja untuk saya - 100% `berhasil. itu setengah jam tanpa harapan mencari jawaban "diselesaikan". terima kasih :)
Darragh Enright
1
Ini adalah jawaban terbaik sejauh ini. Tapi sekarang, bagi saya, bidang pencarian tidak memenuhi semua lebar. Adakah cara mudah untuk memperbaikinya?
TNT
48

Ini adalah pertanyaan lama tetapi info baru masih layak dikirim ...

Dimulai dengan Select2 versi 3.4.0 ada atribut dropdownAutoWidthyang 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 untuk allowClearjika atribut itu digunakan, dan itu menangani teks placeholder juga.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});
Shep
sumber
Ini berfungsi dengan baik ... kecuali jika Anda menggunakan placeholder, jika Anda, jika opsi Anda lebih kecil dari placeholder, teks placeholder akan terpotong :(
MrPowerGamerBR
24

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
Sadee
sumber
11

Dengan> 4.0 dari select2 yang saya gunakan

$("select").select2({
  dropdownAutoWidth: true
});

Yang lain ini tidak bekerja:

  • dropdownCssClass: 'bigdrop'
  • lebar: '100%'
  • lebar: 'tekad'
sobelito
sumber
9

tambahkan metode container css di skrip Anda seperti ini:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

itu akan mengatur lebar pilih Anda sama dengan lebar div Anda.

atuk
sumber
1
Ini melakukan trik untuk saya (saya tidak bisa memilih select2 untuk secara otomatis mengubah ukuran dengan Bootstrap 3). Meskipun saya harus mengatakan itu agak berantakan.
mkataja
Ini membuat saya di jalur yang benar, saya mengganti layar dengan minWidth:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Nabil Kadimi
2

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)

helene
sumber
Terima kasih atas solusinya tetapi itu hanya bekerja untuk saya pada beban pertama. Setelah saya memilih tag dan kemudian mengklik elemen halaman lain, input select2 kembali ke ukuran yang salah
Marklar
1

Tambahkan opsi resolusi lebar ke fungsi select2 Anda

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

Setelah menambahkan CSS di bawah ini ke stylesheet Anda

.select2-container {
width: 100% !important;
}

Ini akan menyelesaikan masalah

Ravindu Lokumanna
sumber
0

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:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});
Bablu Ahmed
sumber
0

Solusi CSS lebih mudah terlepas dari select2

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}
Adrian P.
sumber
0

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.

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

Demo yang Bekerja

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

Abdelsalam Shahlol
sumber