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.

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>

Merri

Answer 1

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;
}

Contradictory

the chozen element does have a position value set in the css and i put the z-index at 9999 and still no jive. This one is driving me nuts! – Merri

did you try the overflow fix? – Contradictory

That did it! Awesome catch man. Some of these CSS elements really throw me for a loop. Thanks again! – Merri

@Contradictory I have same sort of issue but in my case I cant set .modal-body class to overflow visible coz I have lots of dropdowns on modal hence I need to put overlow:scroll otherwise modal overlaps. I have strange situation if I remove overflow:scroll modal overlaps if I put overflow:scroll dropdown appears under that modal like above example could you please assist me in this case. Thanks – Radish

The dropdown is child of the modal right. So even z-index: 1 should work as long as the footer has no z-index – Aspia

Answer 2

I was also having this same problem and couldn't get @hajpoj's to work. I did get it working by setting the following css:

.modal-body { 
    position: static; 
}

Cachalot