it-swarm.com.de

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

Ich habe Probleme, diesen Plunkr (select2 + angulat-ui) zum Laufen zu bringen.

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

Im lokalen Setup bekomme ich die select2-Arbeit, aber ich kann die Breite nicht wie in docs beschrieben einstellen. Es ist zu schmal, um benutzt zu werden.

enter image description here

Vielen Dank.

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

Anscheinend ist es das Verhalten von select2, auf die Breite des ersten Elements zu reduzieren. Ich konnte die Breite durch bootstrap class="input-medium" einstellen. Noch nicht sicher, warum eckig-ui keine Konfigurationsparameter verwendet.

135
bsr

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

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

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

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

select2 V4.0.3

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

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.

7
atuk

Mit> 4.0 von select2 verwende ich

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

Diese anderen haben nicht funktioniert:

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

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)

1
helene

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

0

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   
}
0
Adrian P.

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

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