Bootstrap模式中选择的下拉列表隐藏在模态页脚后面

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.

我正在使用基于twitter bootstrap示例的模态。我有一个选择使用的元素。当所选择的选择下降时,它会被模态页脚切断。我试图在所选元素上添加z-index值,但没有任何效果。我正在倾斜看它,并想知道它是否只是因为select元素是在模态页脚div之前的div?我正在使用所选的默认CSS和bootstrap,所以我没有修改任何东西。

example. Bootstrap模式中选择的下拉列表隐藏在模态页脚后面

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>

2 个解决方案

#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.

要使z-index起作用,还必须设置position = relative,absolute或fixed。将z-index设置为5000也可能有所帮助。 (模态在2000年代处于z指数。

so in your css i would add this:

所以在你的CSS中我会添加这个:

.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:auto属性。您可能需要将其更改为:

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

#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:

我也有同样的问题,无法让@hajpoj工作。我通过设置以下css确实让它工作:

.modal-body { 
    position: static; 
}

#1