web-dev-qa-db-fra.com

Comment changer la hauteur de select2

J'adore la zone de sélection 2 de https://github.com/ivaynberg/select2 J'utilise le format: option pour formater chaque élément et il est superbe.

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

Je sais comment changer la largeur, mais comment puis-je changer la hauteur pour que, APRÈS la sélection de l'élément, le tout s'affiche (environ 150 pixels)

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 recherche la case de sélection pour changer la hauteur après avoir sélectionné un enfant.

Ainsi, lors du premier chargement de la page, il est indiqué "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 de la boîte de sélection pour se développer! Sinon, l'image de l'enfant est coupée.

Est-ce que quelqu'un comprend?

jqueryjquery-select2
49
relipse

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 définie de 150px et il défilera si nécessaire. Ajustez simplement la hauteur jusqu'à ce que votre image s'adapte comme vous le souhaitez.

Vous pouvez également utiliser css pour définir la hauteur des résultats de select2 (la partie déroulante du contrôle de sélection).

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

200px est la hauteur par défaut. Changez-la donc pour la hauteur souhaitée du menu déroulant.

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

Vous voudrez probablement donner d’abord une classe spéciale à votre select2, puis modifier les fichiers css de cette classe uniquement, plutôt que de changer tous les select2 css, à l’échelle du 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;}
13
Abram

éditer le fichier select2.css. Aller à l'option de hauteur et changer:

.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%);
}
8
Jason Speer

La réponse sélectionnée est correcte mais vous ne devriez pas avoir à éditer le fichier select2.css . Vous pouvez ajouter ce qui suit à votre propre fichier CSS personnalisé.

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

Ce travail pour moi

.select2-container--default .select2-results>.select2-results__options{
    max-height: 500px;
}
6
Mohamad Hamouday

Voici ce que je pense de la réponse de Carpetsmoker (que j'ai appréciée parce qu'elle est 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');
});
5
Ian

Je suis venu ici à la recherche d'un moyen de spécifier la hauteur du menu déroulant activé pour 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:

enter image description hereenter image description here

APRÈS:select-2 enabled dropdown with css-defined heightenter image description here

5
Vadym Tyemirov

Il semble que les sélecteurs de feuilles 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
}
3
billynoah

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;
}
2
Baqer Naqvi

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

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

Cela ajustera dynamiquement la hauteur de votre entrée en fonction de son contenu.

2
EmacsVI

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 régler la hauteur minimale à ce que vous voulez. La hauteur augmentera au besoin. Personnellement, j’ai trouvé le rembourrage un peu déséquilibré et la police trop grosse, j’ai donc ajouté ceux-ci également.

1
Wynne Crisman

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

maximise-select2-hauteur

Ce paquet est court et simple. Comme par magie, vos menus déroulants Select2 sont étendus pour couvrir toute la hauteur de la fenêtre.

Il prend en compte le nombre d'éléments dans le menu déroulant, la position du Select2 sur la page, la taille et la position de défilement de la page, la visibilité des barres de défilement et si le menu déroulant est rendu vers le haut ou le bas. Et il se redimensionne à chaque ouverture du menu déroulant. Et minified, c'est ~ 800 octets (y compris les commentaires)!

(Notez que ce plugin est conçu pour Select2 v4.x.x uniquement.)

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

Prendre plaisir!

1
Academy of Programmer

Le 4.0.6 ci-dessous est la solution qui a fonctionné pour moi. Doit inclure select2-selection__rendered et select2-selection__arrow pour aligner verticalement l'étiquette du menu déroulant 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;
}
1
Şafak Gezer

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

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

c'est-à-dire si vous souhaitez que la hauteur de la case de sélection soit de 34px.

1
Brajinder Singh

J'utilise ce qui suit pour ajuster dynamiquement la hauteur de l'élément de liste déroulante select2 afin qu'elle s'adapte parfaitement au nombre 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);
});

Assurez-vous de désactiver la hauteur maximale (par défaut) dans css:

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

(testé uniquement dans la version 4 de select2)

0
Stef

IMHO, définir la hauteur à un nombre fixe est rarement une chose utile à faire. Le réglage sur l’espace disponible à l’écran est beaucoup plus utile.

Quel est exactement ce que ce code fait:

$('select').on('select2-opening', function() {
    var container = $(this).select2('container')
    var position = $(this).select2('container').offset().top
    var avail_height = $(window).height() - container.offset().top - container.outerHeight()

    // The 50 is a magic number here. I think this is the search box + other UI
    // chrome from select2?
    $('ul.select2-results').css('max-height', (avail_height - 50) + px)
})

Je l'ai fait pour select2 3.5. Je ne l'ai pas testé avec la version 4.0, mais d'après la documentation, cela fonctionnera probablement également pour la version 4.0.

0
Martin Tournoij

Essayez ceci, c'est un travail pour moi:

<select name="select_name" id="select_id" class="select2_extend_height wrap form-control" data-placeholder="----">
<option value=""></option>
<option value="1">test</option>
</select>

.wrap.select2-selection--single {
    height: 100%;
}
.select2-container .wrap.select2-selection--single .select2-selection__rendered {
    Word-wrap: break-Word;
    text-overflow: inherit;
    white-space: normal;
}

$('.select2_extend_height').select2({containerCssClass: "wrap"});
0
Saifur Rahman

Aucune des solutions ci-dessus n'a fonctionné pour moi. Ceci est 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;
}
0
ErTR

Si quelqu'un essaie de faire correspondre les styles d'entrée et la hauteur du groupe de formulaires de bootstrap 4 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 supprimera également les contours.

0
Shamseer Ahammed