Bootstrap multiselect full display of options is clipped for set width on a dropdown

Question

I am using bootstrap multiselect by david stutz and I want to limit the max width of my dropdown and provide a horizontal scroll bar when an option's description goes beyond that width.

Sounds simple enough - however, a problem occurs when an option is actually selected. The selected display is cut off at the width of the window. I am trying to get the selected option to fill the dropdown and not cut off.

I altered a fiddle I found to demonstrate the issue. If you select Cheeseeeeeeeeeeeeeee, and then pull the horizontal scroll bar to the right, the text and blue hover are cut off.

http://jsfiddle.net/Alex1018/Ltmeay87/

$(function() {
        $('.multiselect').multiselect();
    });

.multiselect-container {
    max-width: 15px;
    overflow: auto;
    }

<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<select class="multiselect" multiple="multiple">
    <option value="cheese">    Cheeseeeeeeeeeeeeeee     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
</select>

Am I missing something obvious? or this is a bug with multiselect?

Answer 1

you can set this property

.multiselect-container>li{
display:table-row;
}

and it will work