select2 girişinin genişliğini ayarlama (Angular-ui yönergesi ile)

Bu plunkr (select2 + angulat-ui) çalışmasında sorun yaşıyorum.

http://plnkr.co/edit/NkdWUO?p=preview

Yerel kurulumda, select2 çalışmasını alıyorum, ancak genişliği belgelerde açıklandığı gibi ayarlayamıyorum . Kullanılamayacak kadar dar.

Teşekkür ederim.

EDIT: plnkr aldırmayın, burada çalışan bir keman buldum http://jsfiddle.net/pEFy6/

İlk öğenin genişliğine daralmak için select2'nin davranışı gibi görünüyor. Genişliği bootstrap aracılığıyla ayarlayabilirim.Angular class="input-medium"-ui'nin yapılandırma parametrelerini neden almadığından emin değilim.

Öğe genişliğini korumak için çözümlenecek öznitelik genişliğini belirtmeniz gerekir

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

Benim durumumda, sıfır veya daha fazla hap olsaydı select2 doğru bir şekilde açılırdı.

Ama bir veya daha fazla hap olsaydı ve hepsini sildim, en küçük genişliğe küçülecekti. Benim çözümüm basitçe:

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

Bu eski bir soru ama yeni bilgi hala göndermeye değer ...

Select2 sürüm 3.4.0 ile başlayarak dropdownAutoWidth, sorunu çözen ve tüm tek durumları ele alan bir özellik vardır. Varsayılan olarak açık olmadığını unutmayın. Kullanıcı seçim yaparken dinamik olarak yeniden boyutlandırır, bu allowClearözniteliğin kullanılması için genişlik ekler ve yer tutucu metnini de düzgün şekilde işler.

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

select2 V4.0.3

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

Select2> 4.0 ile kullanıyorum

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

Diğerleri işe yaramadı:

• dropdownCssClass: 'bigdrop'
• genişlik: '% 100'
• genişlik: 'çözüm'

betiğinizdeki yöntem kapsayıcı css'ı şu şekilde ekleyin:

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

seçiminizin genişliğini bölgenizin genişliğiyle aynı olacak şekilde ayarlar.

Genişliği 'çözmek' olarak ayarlamak benim için işe yaramadı. Bunun yerine, seçimime "width: 100%" ekledim ve css'i şu şekilde değiştirdim:

.select2-offscreen {position: fixed !important;}

Bu benim için çalışan tek çözümdü (sürümüm 2.2.1) Seçiminiz mevcut tüm yeri alacak, kullanmaktan daha iyi

class="input-medium"

bootstrap'ten, çünkü seçim pencereyi yeniden boyutlandırdıktan sonra bile her zaman kapta kalıyor (duyarlı)

Select2 işlevinize genişlik çözüm seçeneği ekleyin

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

Stil sayfanıza aşağıdaki CSS'yi ekleyin

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

Sorunu sıralayacak

Bunu deneyebilirsin. Benim için çalışıyor

$("#MISSION_ID").select2();

Gizle / göster veya ajax isteğinde, select2 eklentisini yeniden başlatmamız gerekiyor

Örneğin:

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

Select2'den bağımsız daha kolay CSS çözümü

//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   
}

Bootstrap 4 kullanılarak inşa edilen yeni bir projede , yukarıdaki yöntemlerin tümünü denedim ama hiçbir şey işe yaramadı. Benim yaklaşım tablo % 100 almak için jQuery kullanarak kütüphane CSS düzenleyerek oldu .

 // * 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")

Çalışma Demosu

$('.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>