Czy wybrany combobox jQuery ma różne szerokości w zależności od tego, czy jest otwarty?

Question

Używam wybranych, aby stworzyć zabawny combobox. Wszystko działa dobrze, ale mam pytanie.

Myślę, że lista opcji przyjmuje szerokość podaną w wizualnym panelu combobox. Wszystkie moje opcje są bardzo długie i muszę zrobić bardzo duży combobox, aby uniknąć opcji idących w dwóch linijkach.

Czy jest możliwe zrobienie małego comboboxa, np. 150px, gdy jest zamknięte, i o wiele większego, gdy lista jest otwarta?

Answer 1

Tak, jest to możliwe. Można to zrobić na 2 sposoby:

1. Bezpośrednio dodanie stylu "szerokość" do klasy chzn-drop w chosen.css plików.
2. Dodawanie szerokości za pomocą jQuery.

Wolę 2nd jeden i oto kod:

HTML:

<select class="chzn-select" data-placeholder="select your options" style="width: 150px"> 
    <option value="">option1</option> 
    <option value="option1">option2</option> 
    <option value="option2">option3</option> 
</select> 

jQuery:

$('.chzn-select').chosen(); 
$('.chzn-drop').css({"width": "300px"}); 

Wynik:

Mam nadzieję, że zrozumiałeś.

Answer 2

Zatwierdzona odpowiedź jest jednak prawidłowa: można ją również ustawić tak, aby menu rozwijane miało szerokość niezbędną do hostowania zawartości zamiast stałej wartości. Zrobiłem tak, aby nie był mniejszy niż samo pole wyboru.

$('.chosen-drop').css({minWidth: '100%', width: 'auto'}); 

Answer 3

Można ustawić właściwość width z wybranym inicjatorem.

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" }); 

Answer 4

$('.chosen-select').each(function() { 
    var $this = $(this); 
    $this.next().css({'width': '225px'}); 
}); 

Answer 5

odpowiedź Koenpeter jest po prostu dodanie "width: auto" nie działa dla mnie. Zauważyłem, że można to zrobić w CSS pod następującymi względami: