web-dev-qa-db-fra.com

La liste déroulante jQuery choisie peut-elle avoir différentes largeurs selon qu’elle est ouverte?

J'utilise choisi pour faire une combobox amusante. Tout fonctionne bien mais j'ai une question.

Je pense que la liste d'options prend la largeur indiquée dans la liste déroulante visuelle. Toutes mes options sont très longues et je dois créer une très grande liste déroulante pour éviter les options sur deux lignes.

Est-il possible de créer une petite liste déroulante, telle que 150px à la fermeture, et une bien plus grande quand la liste est ouverte?

jquery-chosen
22
Hugo

Oui c'est possible. Cela peut être fait de 2 manières:

  1. Ajout direct du style "width" à la classe chzn-drop dans selected.css file.
  2. Ajout de largeur via jQuery.

Je préfère le 2e et voici le 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"});

Résultat:

J'espère que vous avez compris.

28
Praveen

La réponse approuvée est correcte, cependant: vous pouvez également la configurer pour que le menu déroulant prenne la largeur nécessaire pour héberger son contenu au lieu d’une valeur fixe. J'ai également fait en sorte que ne sera pas plus petit que la zone de sélection elle-même.

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

Vous pouvez définir la propriété width avec l'initialiseur choisi.

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

La réponse de Koenpeter de simplement ajouter un "width: auto" n'a pas fonctionné pour moi. J'ai trouvé que tout pouvait être fait en CSS avec les éléments suivants:

.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
Sareesh Krishnan