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 suis venu ici à la recherche d'un moyen de spécifier la hauteur de la liste déroulante activée par Select2. C'est ce qui a fonctionné pour moi :

.select2-container .select2-choice, .select2-result-label {
  font-size: 1.5em;
  height: 41px; 
  overflow: auto;
}

.select2-arrow, .select2-chosen {
  padding-top: 6px;
}

AVANT :

APRÈS :

Answer 2

La réponse choisie est correcte, mais vous ne devriez pas avoir à modifier l'adresse de l'utilisateur. select2.css fichier. Vous pouvez ajouter les éléments suivants à votre propre fichier css personnalisé.

.select2-container .select2-choice {
    display: block!important;
    height: 36px!important;
    white-space: nowrap!important;
    line-height: 26px!important;
}

Answer 3

Solution paresseuse que j'ai trouvée ici https://github.com/panorama-ed/maximize-select2-height

maximiser-sélection2-hauteur

Ce paquet est court et simple. Il agrandit comme par magie vos listes déroulantes Select2 pour remplir la hauteur de la fenêtre.

Il prend en compte le nombre d'éléments de la liste déroulante, la position de Select2 sur la page, la taille et la position de défilement de la page, la visibilité des barres de défilement et le fait que la liste déroulante soit rendue vers le haut ou vers le bas. Et il se redimensionne lui-même à chaque fois que la liste déroulante est ouverte. Et minifié, il fait ~800 octets (y compris les commentaires) !

(Notez que ce plugin est construit pour Select2 v4.x.x uniquement).

$("#my-dropdown").select2().maximizeSelect2Height();

Profitez-en !

Answer 4

Voici ma version de la réponse de Carpetsmoker (que j'aimais bien parce qu'elle était dynamique), nettoyée et mise à jour pour select2 v4 :

$('#selectField').on('select2:open', function (e) {
  var container = $(this).select('select2-container');
  var position = container.offset().top;
  var availableHeight = $(window).height() - position - container.outerHeight();
  var bottomPadding = 50; // Set as needed
  $('ul.select2-results__options').css('max-height', (availableHeight - bottomPadding) + 'px');
});

Answer 5

Il semble que les sélecteurs de feuille de style aient changé au fil du temps. J'utilise select2-4.0.2 et le sélecteur correct pour définir la hauteur de la boîte est actuellement :

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px
}