How to adjust height of the selectpicker dropdown

Question

I have a selectpicker (bootstrap) in my page which options are loading dyanmically. It has a large number of list but not good to see. I want to reduce the height of the selectpicker. I have give inline style and all but it is not reflecting.

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 corrected it by myself...

Just add data-size in the 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

Using Bootstrap Select, data-size doesn't work for me. I need to override CSS with this:

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

Change the size as you like.