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

Une façon très simple de personnaliser le composant rendu Select 2 avec quelques lignes de CSS Styling :

// Change the select container width and allow it to take the full parent width
.select2 
{
    width: 100% !important
}

// Set the select field height, background color etc ...
.select2-selection
{    
    height: 50px !important
    background-color: $light-color
}

// Set selected value position, color , font size, etc ...
.select2-selection__rendered
{ 
    line-height: 35px !important
    color: yellow !important
}

Answer 2

Appliquez cette feuille de style en cascade pour augmenter la hauteur de la boîte de résultats.

.select2-container--bootstrap4 .select2-results>.select2-results__options {
    max-height: 20em;
}

Answer 3

Ajouter un style

.select2-container .select2-selection--single{
     height:0%;
 }

Answer 4

Si toutes les réponses ci-dessus ne fonctionnent pas pour vous (ce qui n'a pas été le cas pour moi), voici ce qui a fonctionné pour moi.

.select2-results__options {
        max-height: 300px; //This can be any height you want
        overflow:scroll;
    }

Answer 5

Vous n'avez pas besoin de modifier la hauteur pour tous les select2 - source <input> sont copiées dans select2-container, ce qui permet de les styliser en fonction des classes d'entrées. Par exemple, si vous souhaitez modifier la hauteur de certaines instances de select2, ajoutez la classe your-class à la source. <select> puis utiliser ".select2-container. your-class dans votre fichier CSS.

Regards.

Il y a un problème : les classes nommées comme select2* ne sont pas copiés.