web-dev-qa-db-fra.com

Select2 ne calcule pas correctement la largeur `résolue` si select est masqué

J'utilise Twitter bootstrap et le fantastique plugin Select2 .

Celles-ci fonctionnent très bien, je me suis rendu compte que vous deviez définir {width: 'resolve'} lors du lancement de Select2, sinon cela semble foiré !.

Mais j'ai un problème avec l'un de mes choix, comme vous pouvez le voir dans l'image ci-dessous, le Referee Type select a une largeur incorrecte.

Cela est dû au fait que ce champ est initialement masqué et ne devient visible que si Arbitre est sélectionné dans le champ Groupe.

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

Inputs

javascriptjquerycsstwitter-bootstrapjquery-select2
32
Hailwood

Vous pouvez définir la largeur dans l'élément <select> comme suit:

<select style="width:260px">

Jusqu'à ce que vous trouviez la largeur désirée que vous recherchez. En fait, les exemples sur le site officiel du plugin select2 sont réalisés de cette manière.

Toutefois, si vous souhaitez éviter les styles en ligne, vous pouvez toujours remplacer le CSS de Select2 et cibler le conteneur obtenu.

.select2-container {
  width: 260px;
}
17
brianrhea

Select 2 est assez intelligent pour recalculer sa taille si vous le définissez uniquement dans la balise select. ainsi

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

Le formatage CSS sur les classes ne fonctionnerait pas!

Lisez plus dans " Design réactif - Pourcentage de largeur "

15
Yevgeniy Afanasyev

Au lieu d'appeler select2() sur le type d'arbitre lors du chargement de la page, appelez select2 après avoir affiché le type d'arbitre pour la première fois. De cette façon, la sélection sera visible (avec une largeur appropriée) et l'option 'width': 'resolve' devrait fonctionner. Si vous fournissez un petit exemple jsfiddle, il serait plus facile de le signaler.

8
dyve

J'ai résolu mon problème similaire avec CSS simple:

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

Définit la propriété de style de l'élément select avec une largeur de 100%

<select class="js-example-responsive" style="width: 100%"></select>

Voir Conception adaptative - Pourcentage de largeur

5
JwJosefy

Exécutez ceci lorsque vous affichez les contrôles avec Select2 attaché:

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

Ma solution préférée est d'empêcher select2 d'attribuer ces width et de les laisser être automatiques. Commentez ce qui suit dans select2.full.js:

Pour le 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 rechercher dans le 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;
});
1
tika

Vous pouvez lier un événement click à l'élément qui ouvre l'élément caché et définir la largeur de select2 à cet endroit. Travaillé pour moi et c'est assez simple. J'ai utilisé l'événement click parce que le faire avec simplement 'Document Ready' ne fonctionnait pas.

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }
0
Vitor Paz

Select2 a un bogue étrange qui ne "résout" pas de la manière correcte les éléments Select2 cachés. Cela ne fonctionne pas à l'endroit width: "resolve" car c'est déjà la valeur par défaut. Au lieu de cela, la solution consiste à afficher le select2 et à le cacher soudainement une seconde plus tard, après 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 rendra correctement le select2.

0
Max Cuttins
    .select2-container{
        width: 100% !important;
    }
0
Omid Ahmadyani

bidouiller pour que ça marche, c'est courir:

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

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

0
Harry Bosh

Cela a fonctionné pour moi 

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

aussi une largeur fixe

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

0
Jam