Menu hight is not properly calculated when using data-size and styling the options' height

[andronachev]

Using bootstrp-select v1.13.1 , added a CSS class to each option tag on the initial select

<select class="selectpicker">
  <option class="height-40px">Mustard</option>
  <option class="height-40px">Ketchup</option>
  <option class="height-40px">Relish</option>
  <option class="height-40px">Ketchup</option>
  <option class="height-40px">Relish</option>
</select>

This will render the dropdown... using a list and list elements and an anchor tag with the desired height.

However, I want to set the data-size to 3 .. the problem now is that bootstrap-select does not properly calculate the height of each individual option (it only looks at paddings and margins, and not the height itself) .. so the end-result is a dropdown which does not fit 3 elements of height 40px, but 3 elements of the original height .

Fixed by adding the following code on the shown event:

var selectBox = $('#' + selectId);
selectBox.selectpicker();

selectBox.on('shown.bs.select', function (e, clickedIndex, isSelected, previousValue) {
       SetHeight(selectBox);
});

var SetHeight = function (selectBox) {
        var maxOptionCount = parseInt(selectBox.attr('data-size'));
        var optionElements = selectBox.parent().find('ul.dropdown-menu li');

        if (maxOptionCount && maxOptionCount > 0 && optionElements.length > maxOptionCount) {
            var optionHeight = GetElementHeight($(optionElements[0]));
            var maxInnerHeight = optionHeight * maxOptionCount;

            var outerMenu = $(selectBox.parent().find('.dropdown-menu.open'));
            var innerMenu = $(selectBox.parent().find('.inner.open'));
            
            var maxOuterHeight = maxInnerHeight + (GetElementHeight(outerMenu) - GetElementHeight(innerMenu));

            outerMenu.css({
                'max-height': maxOuterHeight + 'px'
            });
            innerMenu.css({
                'max-height': maxInnerHeight + 'px'
            });
        }
    };

    var GetElementHeight = function (element) {
        var paddings = toInt(element.css('padding-top')) + toInt(element.css('padding-bottom'));
        var margins = toInt(element.css('margin-top')) + toInt(element.css('margin-bottom'));
        var height = element.height();

        return height + paddings + margins;
    }

[caseyjhol]

When the menu is first opened, the height of each option is calculated via the liHeight function by creating a temporary "fake" menu and getting the sizes of all necessary elements. It only includes one element for performance reasons. While any class names on the options should be taken into account, at best it can only calculate the size based off of one option (i.e. if different options have different heights, bootstrap-select won't know that). If all options have the same height, it would make more sense to apply the class to the select instead of each individual option.

I'll be fixing this in the next release, but an easier approach in the meantime (without extra JS) would simply be:

<select class="selectpicker height-40px">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

.height-40px li a {
    height: 40px;
}

[andronachev]

I understand that if each option have different height, then bootstrap-select won't know ... But why would putting the class on the <select> tag make any difference ? I.e. the option elements still get the same size of 40 pxs, wether it's by the class from the select of from the option tag

…

On Fri, Aug 24, 2018, 17:55 Casey Holzer ***@***.***> wrote: When the menu is first opened, the height of each option is calculated via the liHeight function by creating a temporary "fake" menu and getting the sizes of all necessary elements. It only includes one element. While any class names on the options *should* be taken into account, at best it can only calculate the size based off of one option (i.e. if different options have different heights, bootstrap-select won't know that). If all options have the same height, it would make more sense to apply the class to the select instead of each individual option. I'll be fixing this in the next release, but an easier approach in the meantime would simply be: <select class="selectpicker height-40px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Ketchup</option> <option>Relish</option> </select> .height-40px li a { height: 40px; } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2058 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APZFXLSQA3fTa7nSTNvEBOs8H9b1dbh2ks5uUBPegaJpZM4WLB41> .

[caseyjhol]

With the current version, any classes on the select element are transferred to the pseudo/temporary menu when calculating menu size, but classes on the options aren't currently transferred. That's why styling via a parent class on the menu works, but styling directly via an option doesn't currently work.

[caseyjhol]

Released in v1.13.2!