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

Question

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

это мой код

<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); 
     } 
    }); 
}); 

Answer 1

поправил я его сам ...

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

Answer 2

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

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

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

Answer 3

Использование 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; 
} 

Измените размер по своему усмотрению.