web-dev-qa-db-fra.com

select2 - Réglage d'une largeur différente pour l'entrée et la liste déroulante

J'utilise Select2 3.3.2

J'ai de très très longues options dans la sélection. Exemple:

<select id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">very long long long text</option>
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
</select>

Le but est d'éviter d'envelopper les options lorsque la liste déroulante s'ouvre.

Je voudrais définir la largeur longue pour la liste déroulante quand il s'ouvre (par exemple - 800px, ou même la largeur évaluée automatique).

Mais garder l'entrée avec une largeur courte lorsque le menu déroulant est fermé (par exemple 300px).

J'ai suivi ceci "Ajouter une option pour définir la largeur de la liste déroulante" question de select2.

Mais je ne pouvais pas le faire fonctionner, la largeur des options/menu déroulant est la même que la largeur de l'entrée et les options sont encapsulées sur plusieurs lignes.

Voici la démo de mon problème dans jsfiddle - http://jsfiddle.net/ewwAX/

Merci à tous pour votre aide.

jquerycssselectjquery-select2
44
naviram

La propriété que vous avez utilisée ne permet pas de contrôler la largeur de la liste déroulante. Vous pouvez utiliser la propriété dropdownCssClass.

Voici une démo dans jsFiddle .

JavaScript :

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

[~ # ~] css [~ # ~] :

.bigdrop {
    width: 600px !important;
}

Veuillez noter que pour les versions plus récentes, il existe maintenant une meilleure solution! Voir réponse de Dave Amphlett

58
Yeronimo

Select2 inclut le paramètre 'dropdownAutoWidth' qui utilise javascript pour tenter d'être suffisamment large pour le contenu de la liste déroulante.

$('#whatever').select2({dropdownAutoWidth : true});

Cela fonctionne au moins avec Select2 3.4.3 - Je ne sais pas combien de temps auparavant il avait été introduit.

80
Dave Amphlett
$("#e1").select2({ width: '100%' });

Essaye ça. Cela définira la largeur du conteneur à 100%

10
Asheeka K P

Encore meilleure solution. Utilisation:

$('#e1').select2({width: 'resolve'});
8
Ron D.

Voici comment faire en sorte que select2 soit plus large uniquement lorsqu'il est ouvert:

Si vous voulez qu'il se développe vers le côté droit, ajoutez ce css:

  .select2-container.select2-dropdown-open {
    width: 170%;
  }

si vous voulez qu'il s'étende à gauche, ajoutez ceci {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }
1
Yossi Shasho

J'ai utilisé cela et cela a fonctionné parfaitement, sauf que cela affectera tous les select2

#select2-drop{
    width: 400px !important;
}
1
kimoduor