Stellen Sie die Breite des select2-Eingangs ein (über die Angular-ui-Direktive).

Ich habe Probleme damit, dass dieses Plunkr (select2 + angulat-ui) funktioniert.

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

Im lokalen Setup erhalte ich die select2-Arbeit, kann jedoch die Breite nicht wie in den Dokumenten beschrieben einstellen . Es ist zu schmal, um verwendet zu werden.

Danke dir.

EDIT: Egal, plnkr, ich habe hier eine funktionierende Geige gefunden http://jsfiddle.net/pEFy6/

Es sieht so aus, als ob es das Verhalten von select2 ist, auf die Breite des ersten Elements zu reduzieren. Ich könnte die Breite über Bootstrap class="input-medium"einstellen. Ich bin mir immer noch nicht sicher, warum Angular-UI keine Konfigurationsparameter akzeptiert.

Sie müssen die aufzulösende Attributbreite angeben, um die Elementbreite beizubehalten

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

In meinem Fall würde sich select2 korrekt öffnen, wenn keine oder mehrere Pillen vorhanden wären.

Aber wenn es eine oder mehrere Pillen gäbe und ich sie alle löschen würde, würde sie auf die kleinste Breite schrumpfen. Meine Lösung war einfach:

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

Dies ist eine alte Frage, aber neue Informationen sind es immer noch wert, veröffentlicht zu werden ...

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 nicht standardmäßig aktiviert ist. Die Größe wird dynamisch geändert, wenn der Benutzer eine Auswahl trifft, es wird die Breite hinzugefügt, allowClearwenn dieses Attribut verwendet wird, und der Platzhaltertext wird ebenfalls ordnungsgemäß verarbeitet.

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

select2 V4.0.3

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

Mit> 4.0 von select2 verwende ich

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

Diese anderen haben nicht funktioniert:

• dropdownCssClass: 'bigdrop'
• Breite: '100%'
• width: 'auflösen'

Fügen Sie Ihrem Skript wie folgt Methodencontainer-CSS hinzu:

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

Dadurch wird die Breite Ihrer Auswahl der Breite Ihres Div gleichgesetzt.

Das Einstellen der Breite auf "Auflösen" hat bei mir nicht funktioniert. Stattdessen habe ich meiner Auswahl "width: 100%" hinzugefügt und das CSS wie folgt geändert:

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

Dies war die einzige Lösung, die für mich funktioniert hat (meine Version ist 2.2.1). Ihre Auswahl nimmt den gesamten verfügbaren Platz ein. Es ist besser als die Verwendung

class="input-medium"

aus dem Bootstrap, da die Auswahl auch nach dem Ändern der Fenstergröße immer im Container verbleibt (reaktionsschnell)

Fügen Sie Ihrer select2-Funktion die Option zum Auflösen der Breite hinzu

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

Nachdem Sie Ihrem Stylesheet unten CSS hinzugefügt haben

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

Es wird das Problem sortieren

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

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

Auf Anfrage zum Ausblenden / Anzeigen oder Ajax müssen wir das select2-Plugin neu initialisieren

Beispielsweise:

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

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   
}

Bei einem kürzlich mit Bootstrap 4 erstellten Projekt hatte ich alle oben genannten Methoden ausprobiert, aber nichts funktionierte. Mein Ansatz bestand darin, das Bibliotheks- CSS mit jQuery zu bearbeiten , um 100% auf dem Tisch zu haben.

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

Arbeits 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>