This has to do with the way accordion content is presented.  It doesn't do so hot with [dynamic content][#2274]. 

In order to [prevent it from truncating content][#7742], you can set `overflow: visisble`:



    .panel-group .panel {
      overflow: visible;
    }

### [Demo in jsFiddle][fiddle]

[#2274]: https://github.com/twbs/bootstrap/issues/2274
[#7742]: https://github.com/twbs/bootstrap/issues/7742

[fiddle]: http://jsfiddle.net/KyleMit/eo4x3gsj/

I have a collapsible accordion panel that is expanded with a single bootstrap multiselect dropdown box.  It has many options.  The expanded accordion panel opens to show the dropdown box but cuts off the options underneath it.  I have tried adjusting the `z-index` in css but that didn't work.

Here is the code:



    <div class="panel-collapse collapse">
        <div class="panel-body">
            <p>Category provided by the borrower for the loan request.</p>
            <select class="multiselect" multiple="multiple" name="purpose">
                <option value="car">car</option>
                <option value="credit card">credit card</option>
                <option value="debt consolidation">debt consolidation</option>
                <option value="educational">educational</option>
                <option value="home improvement">home improvement</option>
                <option value="house">house</option>
                <option value="major purchase">major purchase</option>
                <option value="medical">medical</option>
                <option value="moving">moving</option>
                <option value="other">other</option>
                <option value="renewable energy">renewable energy</option>
                <option value="small business">small business</option>
                <option value="vacation">vacation</option>
                <option value="wedding">wedding</option>
            </select>
        </div>
    </div>

Any ideas on how to get this to work?

Bootstrap multiselect dropdown inside uncollapsed panel is cut off

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:

![default screenshot][default screenshot]

If however, something is applying a width to the `.multiselect-container`, you'll encounter the problem you identified:

![width screenshot][width screenshot]

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][fiddle]

[![fix screenshot][fix screenshot]][fiddle-show]

### 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:

![response screenshot][response screenshot]

* 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.  

[default screenshot]: http://i.imgur.com/yEuZg2S.png
[width screenshot]: http://i.imgur.com/0UwRri9.png
[fix screenshot]: http://i.imgur.com/KZInrI8.png
[response screenshot]: http://i.imgur.com/8zYk0kC.png

[fiddle]: http://jsfiddle.net/KyleMit/7yq7fvsq/
[fiddle-show]: http://jsfiddle.net/KyleMit/7yq7fvsq/show

I am using [David Stutz's Bootstrap-Mutliselect][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.

![screenshot][screenshot]

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.

[screenshot]: http://i.imgur.com/22PSqLJ.png
[Bootstrap-Mutliselect]: https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect options too long, overruns container

Yes, you can now add groups with `dataprovider` thanks to [this pull request][#281]

See the documentation on [`.multiselect('dataprovider', data)`][docs].

### [Demo in jsFiddle][fiddle]

You can compose like this:



    var data = [{
        title: 'First group',
        children: [{ label: 'Cheese', value: 'cheese' }, 
                   { label: 'Tomatoes', value: 'tomatoes' }]
        }, {
        title: 'Second group',
        children: [{ label: 'Mozzarella', value: 'mozzarella' }, 
                   { label: 'Mushrooms', value: 'mushrooms' }]
    }];
    
    $('.multiselect').multiselect('dataprovider', data);



    <select class="multiselect" multiple="multiple"></select>



[#281]: https://github.com/davidstutz/bootstrap-multiselect/pull/281
[docs]: http://davidstutz.github.io/bootstrap-multiselect/#example18-mushrooms
[fiddle]: http://jsfiddle.net/KyleMit/ezyx84xt/

Is there a way to dynamically add grouping in multi select using this formation 



    var data = [
        {label: "ACNP", value: "ACNP"},
        {label: "test", value: "test"}
    ];
    $("#multiselect").multiselect("dataprovider", data);

Bootstrap multi select grouping dynamicaly using array

When you got [this warning][warning], jsFiddle wasn't joking.  Github really won't work as a CDN because it delivers everything as text.  Once you add the proper libraries ([css] and [js]), you'll see how Bootstrap Multiselect transforms your element.

This original markup:



    <select id="menu" class="multiselect" multiple="multiple">
        <optgroup label="Items">
            <option id='one' value='1'>1</option>
            <option id='two' value='2'>2</option>
        </optgroup>
    </select>

Becomes this:



    <ul class="multiselect-container dropdown-menu" >
        <li class="multiselect-item filter"></li>
        <li class="multiselect-item group" ></li>
            
        <li><a href="javascript:void(0);">
            <label class="checkbox">
                <input type="checkbox" name="multiselect" value="1"/> 1
            </label>
        </a></li>

        <li><a href="javascript:void(0);">
            <label class="checkbox">
                <input type="checkbox" name="multiselect" value="2"/> 2
            </label>
        </a></li>
            
    </ul>

Thus, **the element `#one` is no longer in the picture.**

So the selector for the `tooltip` function will have to change a little. We want to target `li` elements that are children of the `.multiselect-container`.  And we also want to ignore the `.filter` and `.group` elements.  Then just call `tooltip` and compose your `title` however you want.

### [Demo in jsFiddle][fiddle]



    $('.multiselect-container li').not('.filter, .group').tooltip({
        placement: 'right',
        container: 'body',
        title: function () {
            // put whatever you want here
            var value = $(this).find('input').val();
            return 'Has Value of ' + value;
        }
    });


[warning]: http://i.imgur.com/t199fea.png

[css]: http://davidstutz.github.io/bootstrap-multiselect/css/bootstrap-multiselect.css
[js]: http://davidstutz.github.io/bootstrap-multiselect/js/bootstrap-multiselect.js

[fiddle]: http://jsfiddle.net/KyleMit/0bm03sy4/

I'm using this [bootstrap multi-select][bootstrap-multiselect]. My goal is to display tooltip when there is a mouseover over the menu items.

It seems the multiselect prevent the tooltip to be displayed.

[**Demo in jsFiddle**][fiddle]

**HTML**:



    <select name="menu[]" id="menu" class="multiselect" multiple="multiple">
        <optgroup label="Items">...
            <option id='one' value='1' title="Popover one" 
                    data-toggle="tooltip" data-content="content one">1</option>
            <option id='two' value='2' title="Popover two" 
                    data-toggle="tooltip" data-content="content two">2</option>
        </optgroup>
    </select>

**JS**:



    $('#menu').multiselect({
        maxHeight: 400,
        numberDisplayed: 1,
        nonSelectedText: 'All',
        enableCaseInsensitiveFiltering: true,
    });

    $("#one").tooltip({
        placement: 'right'
    });
    $("#two").tooltip({
        placement: 'right'
    });

How can I achieve tooltip in multiselect?

[fiddle]: http://jsfiddle.net/ug4gj8tx/
[bootstrap-multiselect]: https://github.com/davidstutz/bootstrap-multiselect