mengatur lebar input select2 (melalui arahan Angular-ui)

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.

Anda perlu menentukan lebar atribut untuk diselesaikan untuk mempertahankan lebar elemen

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

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%' });      

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
});

select2 V4.0.3

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

Dengan> 4.0 dari select2 yang saya gunakan

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

Yang lain ini tidak bekerja:

• dropdownCssClass: 'bigdrop'
• lebar: '100%'
• lebar: 'tekad'

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.

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)

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

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();
    }
});

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   
}

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>