it-roy-ru.com

Как настроить высоту выпадающего списка

У меня на странице есть селектор выбора (начальной загрузки), опции которого загружаются дианмически. У этого есть большое количество списка, но не приятно видеть. Я хочу уменьшить высоту селектора. Я дал встроенный стиль и все, но это не отражает.

это мой код

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

Мой код 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);
        }
    });
});
7
Soumya Mohan

Я исправил это сам ... 

Просто добавьте data-size в 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

Хотя, возможно, не то, что вы ищете, это отличная альтернатива.

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

Он позволяет выполнять поиск в раскрывающемся списке, что устраняет необходимость регулировки высоты раскрывающегося списка, а также работает с начальной загрузкой.

3
harryparkdotio

Использование Bootstrap Select , data-size у меня не работает. Мне нужно переопределить CSS с этим:

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

Измените размер, как вам нравится.

2
Fred K