bootstrap-select icon indicating copy to clipboard operation
bootstrap-select copied to clipboard

Wrong max-height when data-size in use (*if some options are hidden with display:none)

Open qant opened this issue 4 years ago • 1 comments

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...

qant avatar Mar 03 '21 12:03 qant

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 &nbsp;, i.e. <option>&nbsp;</option>, fixes my problem and enables the dropdown to display correctly.

davidenco avatar Jul 19 '21 11:07 davidenco