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.
Antworten:
Sie müssen die aufzulösende Attributbreite angeben, um die Elementbreite beizubehalten
quelle
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:
quelle
resolve
hat bei mir nicht funktioniert - zu 100%. Das ist eine halbe Stunde, in der hoffnungslos nach einer Antwort "gelöst" gesucht wird. danke :)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,allowClear
wenn dieses Attribut verwendet wird, und der Platzhaltertext wird ebenfalls ordnungsgemäß verarbeitet.quelle
select2 V4.0.3
quelle
Mit> 4.0 von select2 verwende ich
Diese anderen haben nicht funktioniert:
quelle
Fügen Sie Ihrem Skript wie folgt Methodencontainer-CSS hinzu:
Dadurch wird die Breite Ihrer Auswahl der Breite Ihres Div gleichgesetzt.
quelle
$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
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)
quelle
Fügen Sie Ihrer select2-Funktion die Option zum Auflösen der Breite hinzu
Nachdem Sie Ihrem Stylesheet unten CSS hinzugefügt haben
Es wird das Problem sortieren
quelle
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:
quelle
Einfachere CSS-Lösung unabhängig von select2
quelle
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.
Arbeits Demo
quelle