it-swarm.com.de

Kann die ausgewählte jQuery-Combobox je nach geöffneter Breite unterschiedliche Breiten haben?

Ich verwende gewählt, um eine lustige Combobox zu erstellen. Alles funktioniert gut, aber ich habe eine Frage.

Ich denke, die Optionsliste nimmt die in der visuellen Combobox angegebene Breite ein. Alle meine Optionen sind sehr lang und ich muss eine sehr große Combobox erstellen, um zu vermeiden, dass Optionen in zwei Zeilen ausgeführt werden.

Ist es möglich, eine kleine Combobox wie 150px zu machen, wenn sie geschlossen ist, und eine viel größere, wenn die Liste geöffnet ist?

22
Hugo

Ja das ist möglich. Dies kann auf zwei Arten erfolgen:

  1. Direktes Hinzufügen von style "width" zur Klasse chzn-drop in selected.css file.
  2. Breite über jQuery hinzufügen.

Ich bevorzuge den zweiten und hier ist der Code:

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"});

Ergebnis:

Hoffe du verstehst.

28
Praveen

Die genehmigte Antwort ist jedoch korrekt: Sie können sie auch so einrichten, dass die Dropdown-Liste die Breite annimmt, die sie zum Hosten des Inhalts anstelle eines festen Werts benötigt. Ich habe es auch so gemacht, dass es nicht kleiner als die Auswahlbox selbst ist.

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

Sie können die width-Eigenschaft mit ausgewähltem Initializer einstellen.

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

Koenpeters Antwort, nur ein "width: auto" hinzuzufügen, hat für mich nicht funktioniert. Ich habe festgestellt, dass alles in CSS mit den folgenden Anweisungen ausgeführt werden kann:

.chosen-container .chosen-drop {
    min-width: 100%;
    width: auto;
}

.chosen-container .chosen-drop ul {
    white-space: nowrap;
}
1
Andrew Marshall
$('.chosen-select').each(function() {
    var $this = $(this);
    $this.next().css({'width': '225px'});
});
1