Mam problem z uruchomieniem tego plunkr (select2 + angulat-ui).
http://plnkr.co/edit/NkdWUO?p=preview
W konfiguracji lokalnej otrzymuję pracę select2, ale nie mogę ustawić szerokości zgodnie z opisem w dokumentacji . Jest zbyt wąski, aby go używać.
Dziękuję Ci.
EDYCJA: Nieważne, że plnkr, znalazłem tutaj działające skrzypce http://jsfiddle.net/pEFy6/
Wygląda na to, że zwinięcie do szerokości pierwszego elementu jest zachowaniem select2. Mogłem ustawić szerokość przez bootstrap. class="input-medium"
Nadal nie jestem pewien, dlaczego angular-ui nie przyjmuje parametrów konfiguracyjnych.
Odpowiedzi:
Musisz określić szerokość atrybutu do rozwiązania, aby zachować szerokość elementu
źródło
W moim przypadku select2 otworzyłoby się poprawnie, gdyby było zero lub więcej tabletek.
Ale jeśli byłaby jedna lub więcej pigułek i usunąłem je wszystkie, skurczyłyby się do najmniejszej szerokości. Moje rozwiązanie było proste:
źródło
resolve
nie działało dla mnie - 100%. to pół godziny beznadziejnie szukając odpowiedzi „rozwiązanej”. dzięki :)To jest stare pytanie, ale nadal warto opublikować nowe informacje ...
Począwszy od wersji Select2 3.4.0 istnieje atrybut,
dropdownAutoWidth
który rozwiązuje problem i obsługuje wszystkie nieparzyste przypadki. Zauważ, że nie jest on domyślnie włączony. Zmienia rozmiar dynamicznie, gdy użytkownik dokonuje selekcji, dodaje szerokość,allowClear
jeśli ten atrybut jest używany, a także poprawnie obsługuje tekst zastępczy.źródło
select2 V4.0.3
źródło
Używam> 4.0 z select2
Te inne nie działały:
źródło
dodaj css kontenera metody do swojego skryptu w następujący sposób:
ustawia szerokość zaznaczenia taką samą, jak szerokość elementu div.
źródło
$( '.opt-option-type-select' ).select2( { containerCss : { minWidth: '10em', }, } );
Ustawienie szerokości na „rozwiązanie” nie działa dla mnie. Zamiast tego dodałem „width: 100%” do mojego wyboru i zmodyfikowałem css w ten sposób:
.select2-offscreen {position: fixed !important;}
To było jedyne rozwiązanie, które działało dla mnie (moja wersja to 2.2.1) Twój wybór zajmie całe dostępne miejsce, jest lepsze niż użycie
class="input-medium"
z bootstrapa, ponieważ select zawsze pozostaje w kontenerze, nawet po zmianie rozmiaru okna (responsywny)
źródło
Dodaj opcję rozpoznawania szerokości do funkcji select2
Po dodaniu poniższego CSS do swojego arkusza stylów
To rozwiąże problem
źródło
Możesz spróbować w ten sposób. Mi to pasuje
$("#MISSION_ID").select2();
Na żądanie hide / show lub ajax musimy ponownie zainicjować wtyczkę select2
Na przykład:
źródło
Łatwiejsze rozwiązanie CSS niezależne od select2
źródło
W ostatnim projekcie zbudowanym przy użyciu Bootstrap 4 wypróbowałem wszystkie powyższe metody, ale nic nie działało. Moje podejście polegało na edycji biblioteki CSS przy użyciu jQuery, aby uzyskać 100% na stole.
Działające demo
źródło