Chosen dropdown within Bootstrap modal is hidden behind modal footer

Question

I am using a modal based on the example from twitter bootstrap. I have a select element that uses chosen. When the chosen select drops down, it is cut off by the modal footer. I tried to add the z-index value on the chosen elements, but nothing works. I'm looking at it in tilt, and wonder if it is just because the select element is with divs that are before the modal footer div? I'm using the default CSS from chosen and bootstrap for this as well, so I haven't modified anything.

example. enter image description here

HTML:

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×</button>
                <h3>
                    Add Tag</h3>
            </div>
            <div class="modal-body">
                <div class="control-group">
                    <label for="addedTags">
                        Add tags (separated by commas)
                    </label>
                    <input id="addedTags" style="width: inherit" type="text">
                </div>
                <div class="control-group">
                    <label for="deleteTags">
                        Delete tags
                    </label>
                    <select style="display: none;" class="tags chzn-done" id="deleteTags" multiple="multiple" name="deleteTags"><option value="49">Accessories</option>
    <option value="69">AG_Adriano_Goldschmied</option>
    <option value="37">BCBG</option>
    <option value="38">Bebe</option>
    <option value="45">Bernie_Dexter</option>
    <option value="19">Black</option>
    <option value="6">Blue</option>
    <option value="66">Body-Con</option>
    <option value="71">Casual</option>
    <option value="39">Christian_Louboutin</option>
    <option value="64">Clear</option>
    <option value="50">Coach</option>
    </select><div style="width: [object Object]px;" class="chzn-container chzn-container-multi chzn-container-active" id="deleteTags_chzn">
<ul class="chzn-choices"><li class="search-field"><input value="Select Some Options" class="default" autocomplete="off" style="width: 149px;" type="text"></li></ul>
<div class="chzn-drop" style="left: 0px; top: 29px;"><ul class="chzn-results"><li id="deleteTags_chzn_o_0" class="active-result highlighted" style="">Accessories</li><li id="deleteTags_chzn_o_1" class="active-result" style="">AG_Adriano_Goldschmied</li><li id="deleteTags_chzn_o_2" class="active-result" style="">BCBG</li><li id="deleteTags_chzn_o_3" class="active-result" style="">Bebe</li><li id="deleteTags_chzn_o_4" class="active-result" style="">Bernie_Dexter</li><li id="deleteTags_chzn_o_5" class="active-result" style="">Black</li><li id="deleteTags_chzn_o_6" class="active-result" style="">Blue</li><li id="deleteTags_chzn_o_7" class="active-result" style="">Body-Con</li><li id="deleteTags_chzn_o_8" class="active-result" style="">Casual</li><li id="deleteTags_chzn_o_9" class="active-result" style="">Christian_Louboutin</li><li id="deleteTags_chzn_o_10" class="active-result" style="">Clear</li><li id="deleteTags_chzn_o_11" class="active-result" style="">Coach</li></ul></div></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">
                    Close</button>
                <input class="btn btn-primary" id="btnAddTags" value="Save" type="button">
                <span class="loader"></span>
            </div>
            <div class="alert alert-error hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Error</strong> <span class="alert-msg"></span>
            </div>
            <div class="alert alert-success hide">
                <button type="button" class="close" data-dismiss="alert">
                    ×</button>
                <strong>Success</strong> <span class="alert-msg"></span>
            </div>

hajpoj hajpoj · Accepted Answer · 2012-12-07T18:17:20

For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal is at a z index in the 2000's.

so in your css i would add this:

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

Edit: .modal-body class has a overflow-y: auto property. You might need to change this to:

.modal-body {
    overflow-y:visible;
}

Chosen dropdown within Bootstrap modal is hidden behind modal footer

2 Answers