web-dev-qa-db-fra.com

Comment ajuster la hauteur du menu déroulant selectpicker

J'ai un sélecteur de sélection (bootstrap) dans ma page dont les options se chargent de façon dynamique. Il y a un grand nombre de listes mais ce n’est pas bon à voir. Je veux réduire la hauteur du selectpicker. J'ai donné un style inline et tout mais ça ne réfléchit pas.

c'est mon code

<select class="selectpicker" data-dropup-auto="false" id="estType" name="estType">
   <option selected disabled value="0">Select</option>'
</select>

Mon code js

$function ({
    $.ajax({
        datatype: "json",
        type: "GET",
        async: false,
        url: "Establishment/GetPrePopulationDetails",
        success: function (result, success) {
            var esttypes = $.map(result['EstablishmentTypes'],
                function (key, value) {
                    return $('<option>', { value: value, text: key });
                });
            $('#estType').append(esttypes);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr.status);
            console.error(thrownError);
        }
    });
});
javascriptjqueryhtmlcsstwitter-bootstrap
7
Soumya Mohan

Je l'ai corrigé par moi-même ... 

Il suffit d'ajouter data-size dans le code HTML

<select class="selectpicker" data-dropup-auto="false" data-size="5" id="estType" name="estType">
   <option selected disabled value="0">Select</option>'
</select>
29
Soumya Mohan

Bien que ce ne soit peut-être pas ce que vous cherchez, c'est une excellente alternative.

https://silviomoreto.github.io/bootstrap-select/examples/#live-search

Il permet d'effectuer une recherche dans la liste déroulante, évitant ainsi de devoir ajuster la hauteur de la liste déroulante, et fonctionne également avec bootstrap.

3
harryparkdotio

Utiliser Bootstrap Select , data-size ne fonctionne pas pour moi. J'ai besoin de remplacer CSS avec ceci:

div.dropdown-menu.open{
  max-height: 314px !important;
  overflow: hidden;
}
ul.dropdown-menu.inner{
  max-height: 260px !important;
  overflow-y: auto;
}

Changez la taille comme vous le souhaitez.

2
Fred K