Search code examples
jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

There's this great plug-in by David Stutz for a multi-select options list using Bootstrap and jQuery.

Resources:

Source on Github

Documentation and examples

It works perfect with Google Chrome, Mozilla Firefox or any other modern browser I've tested it with.

My issue is with IE, specifically with version 9.0.8112. I'm trying to lay out several multiselect controls, one beneath the other.

You can notice in the snapshot below that IE hides an expanded list "behind" the multiselect control beneath it.

Snapshot of the problem

HTML code below:

    <div id="filters_inner">
        Year:
        <select id="example6" class='multiselect_filter' multiple="multiple">
        <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
        <br/>Quarter:
        <select id="Select1" class='multiselect_filter' multiple="multiple">
        <option value="1">Q1</option>
            <option value="2">Q2</option>
            <option value="3">Q3</option>
            <option value="4">Q4</option>
    </select>
    </div>

JS code:

    $(document).ready(function () {
        $('.multiselect_filter').multiselect({
            numberDisplayed: 1
        });
    });

Minor CSS modifications (I've verified that those are not the cause):

.btn-group button {
    padding: 1px 3px 1px 3px;
    font-family: Verdana;
    font-size: 11px;
    color: #333333;
    text-align: left;
}
select {
    text-align: left;
}

I would love to know wheter there's anyone with the notion of how this can be resolved on IE 9.

Solution

  • If IE set z-index to a high value and override any other z-index on it. 

    <!--[if IE]>
<style type="text/css">
  .btn-group.open{
     z-index: 9999 !important;
  }
</style>
<![endif]-->