définir la largeur de l'entrée select2 (via la directive angular-ui)

Question

J'ai le problème de cette plunkr (select2 + angulat-ui) de travail.

http://plnkr.co/edit/NkdWUO?p=preview

Dans les locaux de l'installation, je reçois le select2 travail, mais je ne peux pas régler la largeur, comme décrit dans les docs. Il est trop étroit pour être utilisé.

Je vous remercie.

EDIT: Jamais l'esprit que plnkr, j'ai trouvé un travail violon ici http://jsfiddle.net/pEFy6/

On dirait que c'est le comportement de select2 à l'effondrement de la largeur du premier élément. J'ai pu régler la largeur par bootstrap class="input-medium" .Toujours pas sûr de savoir pourquoi angular-ui ne prend pas de paramètres de config.

Answer 1

Dans mon cas, le select2 s'ouvrirait correctement s'il y avait zéro pilule ou plus.

Mais s'il y avait une ou plusieurs pilules, et que je les effaçais toutes, cela diminuerait à la plus petite largeur. Ma solution était simplement:

 $("#myselect").select2({ width: '100%' });      
 

Answer 2

Vous devez spécifier la largeur d'attribut à résoudre afin de préserver la largeur de l'élément.

 $(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});
 

Answer 3

C'est une vieille question, mais de nouvelles informations valent toujours la peine d'être affichées ...

À partir de Select2 version 3.4.0, il existe un attribut dropdownAutoWidth qui résout le problème et gère tous les cas impairs. Notez qu'il n'est pas activé par défaut. Il redimensionne de manière dynamique au fur et à mesure des sélections effectuées par l'utilisateur, il ajoute de la largeur pour allowClear si cet attribut est utilisé et il gère également correctement le texte de substitution.

 $("#some_select_id").select2({
    dropdownAutoWidth : true
});
 

Answer 4

ajoutez le conteneur de méthodes css dans votre script comme ceci:

 $("#your_select_id").select2({
      containerCss : {"display":"block"}
});
 

la largeur de votre sélection sera identique à la largeur de votre div.

Answer 5

Régler la largeur pour "résoudre" n'a pas fonctionné pour moi. Au lieu de cela, j'ai ajouté "width: 100%" à ma sélection et modifié le css comme ceci:

.select2-offscreen {position: fixed !important;}

C’était la seule solution qui fonctionnait pour moi (ma version est la 2.2.1). Votre sélection occupera toute la place disponible, c’est mieux que d’utiliser

class="input-medium"

depuis bootstrap, car la sélection reste toujours dans le conteneur, même après le redimensionnement de la fenêtre (responsive)