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

Mettez en file d'attente un autre fichier css après le select2.css, et ajoutez-y ce qui suit :

.select2-container .select2-selection {
  height: 34px; 
}

Par exemple, si vous voulez que la hauteur de la boîte de sélection soit de 34px.

Answer 2

J'ai eu un problème similaire, et la plupart de ces solutions sont proches mais pas de cigare. Voici ce qui fonctionne dans sa forme la plus simple :

.select2-selection {
    min-height: 10px !important;
}

Vous pouvez définir la hauteur minimale à votre guise. La hauteur s'élargira en fonction des besoins. Personnellement, j'ai trouvé le padding un peu déséquilibré, et la police trop grande, donc je les ai ajoutés ici aussi.

Answer 3

Sur 4.0.6, voici la solution qui a fonctionné pour moi. Il fallait inclure select2-selection__rendered y select2-selection__arrow pour aligner verticalement l'étiquette de la liste déroulante et l'icône de la flèche :

.select2-container .select2-selection, 
.select2-selection__rendered, 
.select2-selection__arrow {
    height: 48px !important;
    line-height: 48px !important;
}

Answer 4

J'utilise ce qui suit pour ajuster dynamiquement la hauteur de l'élément de liste déroulante select2 afin qu'il s'adapte bien à la quantité d'options :

$('select').on('select2:open', function (e) {
  var OptionsSize = $(this).find("option").size(); // The amount of options 
  var HeightPerOption = 36; // the height in pixels every option should be
  var DropDownHeight = OptionsSize * HeightPerOption;
  $(".select2-results__options").height(DropDownHeight);
});

Veillez à désactiver la hauteur maximale (par défaut) dans le fichier css :

.select2-container--default .select2-results>.select2-results__options {
  max-height: inherit;
}

(testé uniquement dans la version 4 de select2)

Answer 5

Si quelqu'un ici essaie de faire correspondre les styles de saisie et la hauteur du groupe de formulaire de bootstrap4 avec select2 voici ce que j'ai fait ,

.select2-container{
    .select2-selection{
        height: 37px!important;
    }
    .select2-selection__rendered{
        margin-top: 4px!important;
    }
    .select2-selection__arrow{
        margin-top: 4px;
    }
    .select2-selection--single{
        border: 1px solid #ced4da!important;
    }
    *:focus{
        outline: none;
    } 
}

Cela permettra également de supprimer les contours.