Bootstrap Mulitselect - Constrained Width

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<h2>Regular</h2>
<select class="multiselect" multiple="multiple" name="buckHunter">
    <option value="1">Large Antelope &amp; Dangerous Game</option>
    <option value="2">Large Antelope (Blouwildebeest up until Eland)</option>
    <option value="3">Medium to Large Antelope (Blackwb up until Eland)</option>
    <option value="4">Small Game to Medium Game (up to Blackwildbeest)</option>
    <option value="5">N/A</option>
</select>

<h2>Fixed Width</h2>
<div class="mid-width">
    <select class="multiselect" multiple="multiple" name="buckHunter">
        <option value="1">Large Antelope &amp; Dangerous Game</option>
        <option value="2">Large Antelope (Blouwildebeest up until Eland)</option>
        <option value="3">Medium to Large Antelope (Blackwb up until Eland)</option>
        <option value="4">Small Game to Medium Game (up to Blackwildbeest)</option>
        <option value="5">N/A</option>
    </select>
</div>


<h2>Fixed width with Fix</h2>
<div class="mid-width wrapItems">
    <select class="multiselect" multiple="multiple" name="buckHunter">
        <option value="1">Large Antelope &amp; Dangerous Game</option>
        <option value="2">Large Antelope (Blouwildebeest up until Eland)</option>
        <option value="3">Medium to Large Antelope (Blackwb up until Eland)</option>
        <option value="4">Small Game to Medium Game (up to Blackwildbeest)</option>
        <option value="5">N/A</option>
    </select>
</div>















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;background:lightgray;width:100%;'>
    About this SO Question:...

CSS

.mid-width .multiselect-container {
    width: 200px;
}
.mid-width.wrapItems .multiselect-container>li>a { 
    white-space: normal;
}

JavaScript

$('.multiselect').multiselect({ 
    enableCaseInsensitiveFiltering: true,
    maxHeight: 200,
});