How to adjust selectpicker dropdown height

Question

I have selectpicker (bootstrap) on my page whose parameters are loaded in dianese. It has a large number of lists, but not nice to see. I want to reduce selectpicker height. I give an inline style and that's it, but it does not reflect.

this is my code

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

My js code

$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

I fixed it myself ...

Just add data-sizein 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

Although perhaps not what you are looking for, this is a great alternative.

https://silviomoreto.imtqy.com/bootstrap-select/examples/#live-search

, , .

Answer 3

Using Bootstrap the Select , data-sizedoes not work for me. I need to override CSS as follows:

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

Resize as you wish.