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

Je sais que cette question est super ancienne, mais je cherchais une solution à cette même question en 2017 et j'en ai trouvé une moi-même.

.select2-selection {
    height: auto !important;
}

Cela permet d'ajuster dynamiquement la hauteur de votre entrée en fonction de son contenu.

Answer 2

Je suis venu avec :

.select2,
.select2-search__field,
.select2-results__option
{
    font-size:1.3em!important;
}
.select2-selection__rendered {
    line-height: 2em !important;
}
.select2-container .select2-selection--single {
    height: 2em !important;
}
.select2-selection__arrow {
    height: 2em !important;
}

Answer 3

Il suffit d'ajouter dans select2.css

/* Make Select2 boxes match Bootstrap3 as well as Bootstrap4 heights: */
.select2-selection__rendered {
line-height: 32px !important;
}

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

Answer 4

J'utilise Select2 4.0. Cela fonctionne pour moi. Je n'ai qu'un seul contrôle Select2.

.select2-selection.select2-selection--multiple {
    min-height: 25px;
    max-height: 25px;
}

Answer 5

Aucune des solutions ci-dessus n'a fonctionné pour moi. Voici ma solution :

/* Height fix for select2 */
.select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px;
}