Comment modifier la hauteur de la boîte select2

Question

J'adore la boîte select2 de https://github.com/ivaynberg/select2 J'utilise l'option format : pour formater chaque élément, et cela donne de très bons résultats.

Tout va bien, sauf que l'élément sélectionné est plus grand que la hauteur de la boîte de sélection à cause d'une image.

Je sais comment modifier la largeur, mais comment modifier la hauteur pour qu'APRÈS la sélection de l'élément, celui-ci s'affiche entièrement (environ 150px).

Voici mon initiation :

<script>
    $("#selboxChild").select2({
        matcher: function(term, text) { 
            var t = (js_child_sponsors[text] ? js_child_sponsors[text] : text); 
            return t.toUpperCase().indexOf(term.toUpperCase()) >= 0; 
        },
        formatResult: formatChild,
        formatSelection: formatChild,
        escapeMarkup: function(m) {
            return m;
        }
    });
</script>

et voici ma boîte de sélection

<select id="selboxChild" style="width: 300px; height: 200px">
    <option value="">No child attached</option>
</select>

Pour clarifier : je ne veux pas que la hauteur de chaque option change. Je cherche à ce que la boîte de sélection change de hauteur après avoir sélectionné un enfant.

Quand la page se charge, elle indique "Aucun enfant sélectionné". Lorsque vous cliquez sur le menu déroulant et sélectionnez un enfant, vous voyez l'image de l'enfant. Maintenant, j'ai besoin que la boîte de sélection s'étende ! Sinon, l'image de l'enfant est coupée.

Est-ce que quelqu'un comprend ?

Answer 1

Vous devez ajouter les définitions de style suivantes à votre CSS :

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

Answer 2

Vous pouvez le faire avec un simple css. D'après ce que j'ai lu, vous voulez définir la hauteur de l'élément avec la classe "select2-choices".

.select2-choices {
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
}

Cela devrait vous donner une hauteur fixe de 150px, qui défilera si nécessaire. Il suffit d'ajuster la hauteur jusqu'à ce que votre image s'adapte comme vous le souhaitez.

Vous pouvez également utiliser le code CSS pour définir la hauteur de la zone select2-results (la partie déroulante du contrôle de sélection).

ul.select2-results {
  max-height: 200px;
}

La hauteur par défaut est de 200px ; modifiez-la en fonction de la hauteur souhaitée pour la liste déroulante.

Answer 3

Vous voulez probablement donner une classe spéciale à votre select2 d'abord, puis modifier le css pour cette classe seulement, plutôt que de changer tout le css select2, dans tout le site.

$("#selboxChild").select2({ width: '300px', dropdownCssClass: "bigdrop" });

SCSS

.bigdrop.select2-container .select2-results {max-height: 200px;}
.bigdrop .select2-results {max-height: 200px;}
.bigdrop .select2-choices {min-height: 150px; max-height: 150px; overflow-y: auto;}

Answer 4

Ce travail pour moi

.select2-container--default .select2-results>.select2-results__options{
    max-height: 500px !important;
}

Answer 5

Éditez le fichier select2.css. Allez à l'option hauteur et changez :

.select2-container .select2-choice {
    display: block;
    height: 36px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -o-linear-gradient(bottom, #eee 0%, #fff 50%);
    background-image: -ms-linear-gradient(top, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(top, #fff 0%, #eee 50%);
}