twitter-bootstrap Bootstrap 模态中选择的下拉菜单隐藏在模态页脚后面

Chosen dropdown within Bootstrap modal is hidden behind modal footer

提问by user576838

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 示例的模式。我有一个使用 selected 的 select 元素。When the chosen select drops down, it is cut off by the modal footer. 我尝试在所选元素上添加 z-index 值，但没有任何效果。我正在倾斜地查看它，并想知道这是否只是因为 select 元素的 div 位于模态页脚 div 之前？我也在使用 selected 和 bootstrap 中的默认 CSS，所以我没有修改任何内容。

example.

例子。

HTML:

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>

回答by hajpoj

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 年代的 az 索引。

so in your css i would add this:

所以在你的 css 中我会添加这个：

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

Edit:.modal-bodyclass has a overflow-y: autoproperty. You might need to change this to:

编辑：.modal-body类有一个 overflow-y: auto属性。您可能需要将其更改为：

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

回答by marty

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