6

I am having some styling problems with bootstrap.

I have a small modal window containing a dropdown. However I can't seem to get the dropdown to display over the footer of the window.

I have played with the zindex of the dropdown ensuring it was higher than the windows but no luck.

Can anyone suggest what I should be changing?

The html

<div class="modal hide fade" id="store-modal">
<div class="modal-header">
    <h3 id="reward-title">Select Store</h3>
</div>
<div class="modal-body">
    <p>
        Please select the store you are working from
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Select<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    @foreach (var model in Model)
                    {
                        <li>
                            <a href="#" class="store" data-id="@Html.DisplayFor(modelItem => model.StoreId)">@Html.DisplayFor(modelItem => model.StoreName)</a>
                        </li>
                    }
                </ul>
            </div>

    </p>
</div>
<div class="modal-footer">
</div>

enter image description here

4

2 回答 2

3

您只需添加一个z-index具有高于模型框页脚的属性的类。

要使 z-index 起作用，您还必须设置 position = relative、absolute 或 fixed。也将 z-index 设置为 5000 可能会有所帮助。（模态的 z 指数可能高于 2000 年的。

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

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

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

.modal-body {
    overflow-y:visible;
}
于 2013-11-14T16:04:39.110 回答
2

如果您设置下拉列表的 z-index，请确保它已定位。这意味着它具有位置：绝对、位置：相对或位置：固定。

于 2013-01-11T08:14:51.560 回答