Wrong max-height when data-size in use (*if some options are hidden with display:none)
on "change.bs.select" we hide all options with:
$('#location option').hide();
And then on "show.bs.select" of this dropdown with hidden options:
$('#location option.property_city.barcelona-city').prop('selected', true);
$('#location option.property_city.barcelona-city').show();
$('#location').selectpicker('refresh');
So the part of html with wrong height (max-height: 0px;) looks like this:
<div class="dropdown-menu open" style="max-height: 0px;overflow: hidden;">
<div class="inner open" role="listbox" id="bs-select-4" tabindex="-1" aria-multiselectable="true" style="max-height: 0px;overflow-y: auto;">....
When i am directly edit those "max-height: 0px" to "max-height: 200px" i can see the values
So my guess the part of bootstrap-select where the max-height: is calculated is wrong.
Here you have code with data-size in use(line 175 of index.html) : https://codesandbox.io/s/heuristic-mestorf-0yd6u?file=/index.html
I hope it save some one time...
I have the same issue if one or more options has a blank label, i.e. <option></option>. Regardless of what I set the data-size to, the max-height is always set to 98px.
Replacing the blank label with , i.e. <option> </option>, fixes my problem and enables the dropdown to display correctly.