Legen Sie die Breite der Eingabe „select2“ fest (über die Angular-ui-Direktive).

Question

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

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

Im lokalen Setup bekomme ich die Funktion „select2“, aber ich kann die Breite nicht wie im beschrieben einstellen Dokumente.Es ist zu schmal, um verwendet zu werden.

Danke schön.

BEARBEITEN:Egal, ich habe hier eine funktionierende Geige gefundenhttp://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 einstellen class="input-medium" .Ich bin mir immer noch nicht sicher, warum Angular-UI keine Konfigurationsparameter akzeptiert.

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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 löst das Problem und behandelt alle Sonderfälle.Beachten Sie, dass es standardmäßig nicht aktiviert ist.Die Größe ändert sich dynamisch, wenn der Benutzer eine Auswahl trifft, und fügt Breite hinzu allowClear wenn dieses Attribut verwendet wird, und es verarbeitet auch Platzhaltertext ordnungsgemäß.

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

Answer 4

select2 V4.0.3

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

Answer 5

Mit > 4.0 von select2 verwende ich

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

Diese anderen haben nicht funktioniert:

• dropdownCssClass:'großer Tropfen'
• Breite:'100%'
• Breite:'lösen'

Answer 6

Fügen Sie Methodencontainer-CSS wie folgt in Ihr Skript ein:

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

Dadurch wird die Breite Ihrer Auswahl auf die Breite Ihres Divs eingestellt.

Answer 7

Das Setzen der Breite auf „Auflösung“ hat bei mir nicht funktioniert.Stattdessen habe ich „width:100%“ zu meiner Auswahl 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). Ihr Auswahl wird den gesamten verfügbaren Platz einnehmen, es ist besser als die Verwendung

class="input-medium"

vom Bootstrap, da die Auswahl immer im Container bleibt, auch nach der Größenänderung des Fensters (responsiv)

Answer 8

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

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

Bei einer Hide/Show- oder Ajax-Anfrage 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();
    }
});

Answer 9

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   
}

Answer 10

Fügen Sie Ihrer Funktion „select2“ die Option „Width Resolution“ hinzu

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

Fügen Sie anschließend das folgende CSS zu Ihrem Stylesheet hinzu

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

Es wird das Problem lösen

Answer 11

Bei einem aktuellen Projekt, das mit erstellt wurde Bootstrap 4, Ich habe alle oben genannten Methoden ausprobiert, aber nichts hat funktioniert.Mein Ansatz bestand darin, das zu bearbeiten Bibliothek CSS verwenden jQuery zu bekommen 100% auf dem Tisch.

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