bootstrap-multiselect options too long, overruns container

Question

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page:

$(function () {
    $("select").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { multiple: false }
    );

    $("[multiple]").multiselect(
        { enableFiltering: true },
        { maxHeight: 5 },
        { enableCaseInsensitiveFiltering: true }
    );
});

The code above works perfectly. The problem is that options with long text values overruns it's container boundaries as per the following screenshot, instead of wrapping over to a new line.

How can I fix this? Preferably if there is a way to do it by simply altering my above .js code that would be a bonus.

Delaunay

you can fix this by CSS, but I just tried this with the latest version of this library & it seems to be handling the width by expanding the width of the dropdown container itself - codepen.io/nitishdhar/pen/lHyas – Steffens

@Luke Fixing it in whichever way is the fastest and easiest – Delaunay

I have the same problem. The answer of KyleMit doesn't work. – Flew

Answer 1

By default, nothing should be applying a width to the .multiselect-container, so it will take up as much room as it needs in order to display all the items on a single line:

If however, something is applying a width to the .multiselect-container, you'll encounter the problem you identified:

The problem is that bootstrap multiselect uses a dropdown-menu to which the bootstrap library applies the following code:

.dropdown-menu>li>a { white-space: nowrap; }

In order to fix this, we can return white-space to it's normal wrapping mode with the following css:

.multiselect-container > li > a { white-space: normal; }

Demo in jsFiddle

Couple more notes:

1. maxHeight takes the number of pixels, so passing in 5 will make the control only 5px high. You should pass in something like maxHeight: 200
2. enableCaseInsensitiveFiltering does the same thing as enableFiltering so you don't need both. Decide whether you want case sensitivity or not and then set either one to true

Update with further explanation

@user2105811, You do not need to target the label specifically and you do not need to use !important here's the HTML structure and CSS that is generated for this solution:

• Notice that white-space is always inherited from the parent, so targeting label will do the same thing as targeting a, but will address the problem at it's root.
• The original bootstrap code has the same degree of specificity as the selector being used to fix it. Meaning it will override it as long as your custom CSS is placed after the bootstrap css which should always be the case. If it's not working, I suspect you are not doing this.

Jez

@user2105811, can you be more specific, providing an example of what you expect and what's actually happening. – Jez

Answer 2

Your suggestion to use:

.multiselect-container > li > a { 
     white-space: normal;
}

doesn't work. Instead I added the label tag to the CSS and set it to !important. Now it works.

.multiselect-container > li > a > label{
    white-space: normal !important;
}

Flew

Improper use of !important. You should only use this to override a previous rule that you don't have control over on which someone else has improperly used !important. – Jez