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.

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.