die Breite der select2-Eingabe festlegen (über die Angular-ui-Direktive)

In meinem Fall würde sich select2 korrekt öffnen, wenn es null oder mehr Pillen gab.

Wenn es jedoch eine oder mehrere Pillen gab und ich sie alle löschte, schrumpfte sie auf die kleinste Breite. Meine Lösung war einfach:

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

Dies ist eine alte Frage, aber es lohnt sich immer noch, neue Informationen zu veröffentlichen ...

Ab Select2 Version 3.4.0 gibt es ein Attribut dropdownAutoWidth, das das Problem löst und alle ungeraden Fälle behandelt. Beachten Sie, dass es standardmäßig nicht aktiviert ist. Die Größe ändert sich dynamisch, wenn der Benutzer eine Auswahl vornimmt, und fügt für allowClear die Breite hinzu, wenn dieses Attribut verwendet wird. Außerdem wird Platzhaltertext korrekt verarbeitet.

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

select2 V4.0.3

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

fügen Sie die Methode container css wie folgt in Ihr Skript ein:

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

die Breite Ihrer Auswahl wird dabei genauso wie die Breite Ihres Div eingestellt.

Mit> 4.0 von select2 verwende ich

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

Diese anderen haben nicht funktioniert:

• dropdownCssClass: 'bigdrop' 
• breite: '100%' 
• breite: 'lösen'

Die Einstellung der Breite auf "Auflösen" hat für mich nicht funktioniert. Stattdessen fügte ich "select: 100%" zu meinem select hinzu und änderte die css wie folgt:

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

Dies war die einzige Lösung, die für mich funktionierte (meine Version ist 2.2.1) .__ Ihre Auswahl wird den gesamten verfügbaren Platz einnehmen 

class="input-medium"

von Bootstrap, da die Auswahl immer im Container bleibt, auch nachdem die Fenstergröße geändert wurde (responsive)

Fügen Sie Ihrer Funktion select2 die Option width resolve hinzu

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

Nach dem Hinzufügen von CSS zu Ihrem Stylesheet

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

Es wird das Problem lösen

Einfachere CSS-Lösung unabhängig von 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   
}

Sie können es so versuchen. Für mich geht das

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

Bei Hide/Show- oder Ajax-Anfragen müssen wir das select2-Plugin neu initialisieren

Zum Beispiel:

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

Bei einem kürzlich mit Bootstrap 4 erstellten Projekt hatte ich alle oben genannten Methoden ausprobiert, aber nichts funktionierte. Mein Ansatz war es, die BibliothekCSS mit jQuery zu bearbeiten, um 100% auf den Tisch zu bekommen.

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

Arbeiten Demo

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