Word wrapping on data-subtext if the text is too long

[bhritch]

[bartclaeys]

Same problem here in v1.13.1, when adding subtext that is really long, the dropdown menu becomes too wide and the text does not wrap when exceeding the selector's width. I've tried to set data-width attribute, but that doesn't affect the dropdown menu. Spent several hours to implement a hack to get this fixed, but nothing seems to work so far.

[bartclaeys]

Fixed (but it's a hack):

.bootstrap-select .dropdown-menu {
	width: 100%;
}

.bootstrap-select .dropdown-menu li small {
	white-space: normal;
}

[dongloo]

Fixed (but it's a hack):

.bootstrap-select .dropdown-menu {
	width: 100%;
}

.bootstrap-select .dropdown-menu li small {
	white-space: normal;
}

if fix by this way, data-size not working

[Bogatinov]

Hey, sorry for opening an old issue @caseyjhol, can you assist me on how to use v1.13.18 with

1. white-space or any other way to cut long text in <option>
2. without extra space at the bottom

white-space: normal; seems to work for v1.12, however it does add extra space in v1.13.18 when opening the menu.

Thanks in advance 😃

Configuration

Most basic dropdown configuration

$element.addClass('selectpicker').selectpicker({
    container: 'body'
});

with the custom rule for the white-space

.bootstrap-select .dropdown-item {
    white-space: normal;
}

which affects the dropdown height

<div class="dropdown-menu open">
    <div class="inner open"> <!-- 145px height, because of min-height -->
         <div class="dropdown-menu inner"> <!-- 76px height, exactly as necessary -->
             <ul class="dropdown-menu inner">
                 <li class="selected active">
                       <a class="dropdown-item"> <!-- wrap long text with white-space -->
                  </li>
             </ul>
         </div>
    </div>
</div>

Versions

Lowest stable is 1.13.12.

• 1.13.13 has content error
• 1.13.14 has selected item issue like in #2445
• 1.13.15 no issues with white-space: normal, but still issue with #2445
• 1.13.16 adds extra space for white-space because of #2393

References

I went through all options, there isn't any to "handle" the algorithm for the Height of .dropdown-menu https://developer.snapappointments.com/bootstrap-select/options/

[nativ69]

upvoting for @Bogatinov request