Select2 pas de calcul `résolu` largeur correctement si vous sélectionnez est caché

Je suis en utilisant Twitter bootstrap et le fantastique Select2 plugin.

Ces travaillons une grande, j'ai réalisé que vous devez définir {width: 'resolve'} lors de l'initiation de Select2 sinon, il semble foiré!.

Mais j'ai un problème avec un de mes sélectionne, comme vous pouvez le voir dans l'image ci-dessous, la Referee Type sélectionnez n'a pas la bonne largeur.

Cela est dû en raison de ce champ étant initialement masqué, et ne devient visible que si Arbitre est sélectionné dans le Groupe champ.

Alors, comment puis-je résoudre ce problème?

Pouvez vous s'il vous plaît fournir un jsfiddle cette façon, nous pouvons jeter un oeil à votre problème?
une option est d'attendre jusqu'à ce que l'élément indiqué pour initialiser le plugin, une autre est de ne pas cacher select mais le placer hors de l'écran jusqu'à ce que nécessaire. Démo aiderait
J'ai été en utilisant select2 pour un certain temps et j'ai l'habitude de définir la largeur en ligne dans l'élément de style dans le HTML je sais que ce n'est pas une très bonne pratique, mais Select2 tente de copier l'élément de style largeur de l'avant pour résoudre ses dimensions réelles de sorte qu'il vaut la peine un coup de feu. Dans ce cas, vous pouvez supprimer width: 'resolve'.
essayez d'ajouter inline largeur avec "!important".

InformationsquelleAutor Hailwood | 2013-01-14

17

Vous pouvez définir la largeur de la <select> élément comme suit:
```
<select style="width:260px">
```
Jusqu'à ce que vous trouver la largeur désirée que vous êtes à la recherche pour. En fait, les exemples sur le site officiel select2 plugin site sont effectuées de cette manière.

Toutefois, si vous avez l'intention au moment de rester loin de styles en ligne, vous pouvez toujours simplement les remplacer select2 du CSS et de la cible le conteneur supérieur.
```
.select2-container {
  width: 260px;
}
```
- omg c'est me rend fou, que les choses les plus simples sont toujours négligé. Merci pour votre réponse.
- est-ce la solution de travail en responsive vue?
InformationsquelleAutor brianrhea
16

Sélectionnez 2 est assez intelligent pour le calcul de la taille si seulement vous mettre dans la balise select. comme

<select style="width: 100%"></select>

CSS de mise en forme sur les classes ne fonctionnerait pas!

Lire la suite dans "Responsive design pour Cent de la largeur"
- En plus de dire que c'est la seule réponse correcte, j'ai envie d'ajouter que le comportement est différent entre Firefox et Chrome pour une raison quelconque. Bravo en tout cas!
- Après avoir lutté pendant des siècles, cela a résolu mon problème 🙂
- Vous êtes les bienvenus. Avez-vous remarqué une différence entre Firefox et google Chrome?
- Cela fonctionne bien, mais pourrais-je savoir ce qui rend cette question?
InformationsquelleAutor Yevgeniy Afanasyev
9

Au lieu d'invoquer select2() sur l'Arbitre de Type lorsque le chargement de la page, invoquer select2 après montrant Arbitre Type pour la première fois. De cette façon, le select sera visible (avec une bonne largeur), et le 'width': 'resolve' option devrait fonctionner. Si vous fournissez une petite jsfiddle exemple, il serait plus facile de le souligner.
- Ne les astuces pour ajax render (sans les guillemets, pour la largeur). Merci.
- C'EST LA BONNE RÉPONSE! 🙂 Mon Select2 fonctionnait correctement jusqu'à ce que je ne bouge pas d'un caché ONGLET. À partir de ce point, la largeur de Select2 a été réduite à la valeur sélectionnée. C'est juste un BUG, la solution de contournement consiste à display:block/déclarer Select2 /display:none au cours de la page prêt.
InformationsquelleAutor dyve
9

J'ai résolu mon problème similaire avec CSS simple:
```
.select2-container {
    width: 100% !important;
}
```
- C'est de loin la meilleure réponse. Plus facile à mettre en œuvre également.
- Il fonctionne pour tous les cas (si l'élément est caché à l'intérieur d'un parent masqué et aussi si l'élément lui-même est caché). Pas besoin de vérifier tout cas externes.
- Ceci interfère avec d'autres boîtes de negativley dans mon cas
InformationsquelleAutor NMC
5

Définir la propriété style de select élément avec une largeur de 100%
```
<select class="js-example-responsive" style="width: 100%"></select>
```
Voir Responsive design pour Cent de la largeur

InformationsquelleAutor JwJosefy

L'exécuter lorsque vous affichez des contrôles avec Select2 joint:

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

InformationsquelleAutor BertrandJ

Ma solution préférée consiste à arrêter select2 de l'affectation de ces width et de les laisser en automatique. Commentaire de la suite dans select2.full.js :

Pour Conteneur:

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

Pour la Recherche à l'intérieur du conteneur:

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});

Il y a une question ouverte pour résoudre ce ici, mais pas de patch ou de la réponse du responsable: github.com/select2/select2/issues/4513
$('select').select2({ width: 'auto' });

InformationsquelleAutor tika

0

hack pour faire le travail consiste à exécuter:

$('.filter-modal select').css('width', '100%');
avant
$('select').select2().

https://github.com/select2/select2/issues/4269

InformationsquelleAutor Harry Bosh
0

Vous pouvez lier un événement click à l'élément qui vous ouvre élément masqué et définir la select2 largeur de là. A travaillé pour moi et c'est assez simple. J'ai utilisé l'événement click parce que faire avec juste "document ready" ne fonctionnait pas.
```
$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }
```
InformationsquelleAutor Vitor Paz
0

Select2 a un bug étrange qui pas de "résoudre" dans le bon sens caché Choisir 2 éléments. Ce n'est pas à la place de travail width: "resolve" que c'est déjà la valeur par défaut. Au lieu de la solution de contournement est de montrer la select2 et les cacher soudain, une seconde plus tard la déclaration.
```
$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness
```
Cela permettra de rendre correctement la select2.

InformationsquelleAutor Max Cuttins

Cela a fonctionné pour moi

.select2-container  {
    width: 100% !important;
}

également une largeur fixe

.select2-container  {
    width: 300px !important;
}

InformationsquelleAutor Jam

.select2-container {
  width: 100% !important;
}

InformationsquelleAutor Omid Ahmadyani

-1
```
$("span.select2").css("width", "100%");
```
InformationsquelleAutor Ebad ghafoory

Vous devez vous connecter pour publier un commentaire.