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

151

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.

Geben Sie hier die Bildbeschreibung ein

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.

bsr
quelle
Können Sie genauer sagen, was Sie bereits versucht haben? Die ausgewählte Bibliothek (auf der select2 basiert) generiert eine Breite basierend auf der im HTML / CSS angegebenen Breite.
Adam Grant

Antworten:

216

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

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
Diego Alvarez
quelle
7
$ ("# myselect"). select2 ({Platzhalter: 'Land auswählen', Breite: '192px'}); habe mein Problem mit IE gelöst und habe keine Auswirkungen auf FF und Chrome! Vielen Dank!
Adrian P.
Ja. Ich fragte auch Autor github.com/godbasin/vue-select2/issues/11
shinriyo
230

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%' });      
portforwardpodcast
quelle
7
beste Antwort bei Verwendung von select2 Version 4.0.0
Steve
1
warum dies besser ist als $ ("# myselect"). select2 ({width: 'resolve'}); ? (scheint das gleiche zu sein)
Ricardo Vigatti
1
@ RicardoVigatti: width: 'resolve' funktioniert nur einmal beim Laden der Seite, nicht jedoch beim Ändern der Größe. Wenn Sie reaktionsschnelle Designs verwenden, reicht dies nicht aus
Fabian Schöner,
1
resolvehat bei mir nicht funktioniert - zu 100%. Das ist eine halbe Stunde, in der hoffnungslos nach einer Antwort "gelöst" gesucht wird. danke :)
Darragh Enright
1
Dies ist die bisher beste Antwort. Aber jetzt füllt das Suchfeld für mich nicht die gesamte Breite aus. Gibt es eine einfache Möglichkeit, dies zu korrigieren?
TNT
48

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
});
Schaf
quelle
Es funktioniert ziemlich gut ... außer wenn Sie Platzhalter verwenden, wenn Sie sind, wenn Ihre Optionen kleiner als der Platzhalter sind, wird der Platzhaltertext abgeschnitten :(
MrPowerGamerBR
24

select2 V4.0.3

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

Mit> 4.0 von select2 verwende ich

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

Diese anderen haben nicht funktioniert:

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

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.

atuk
quelle
1
Dies war der Trick für mich (ich konnte select2 nicht dazu bringen, die Größe mit Bootstrap 3 automatisch zu ändern). Obwohl ich sagen muss, dass es ein bisschen hacky ist.
Mkataja
Dies brachte mich auf den richtigen Weg, ich ersetzte Anzeige durch minWidth:$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Nabil Kadimi
2

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)

helene
quelle
Vielen Dank für die Lösung, aber es hat nur beim ersten Laden funktioniert. Nachdem ich ein Tag ausgewählt und dann auf ein anderes Seitenelement geklickt hatte, wurde die Eingabe select2 auf die falsche Größe zurückgesetzt
Marklar
1

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

Ravindu Lokumanna
quelle
0

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();
    }
});
Bablu Ahmed
quelle
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   
}
Adrian P.
quelle
0

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>

Abdelsalam Shahlol
quelle