Geek Answers Handbook

Display Bootstrap Boot List List in Modal Window Footer

I'm having problems installing bootstrap.

I have a small modal window containing a dropdown menu. However, I can’t show that the dropdown menu is displayed above the window footer.

I played with the zindex drop-down list, ensuring that it was taller than Windows, but no luck.

Can anyone suggest what should I change?

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
source share
2 answers

If you set the z-index of the drop-down list, make sure it is set. The value has either position: absolute, position: relative or position: fixed.

+1
source

You simply add a class having z-index as an attribute having a model header.

In order for the z-index to work, you also need to set position = relative, absolute or fixed. A z-index of around 5000 can also help. (A modal may have a z index above the 2000s.

so in your css I would add the following:

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

The .modal-body class has the overflow-y: auto property. You may need to change this to:

 .modal-body { overflow-y:visible; }
+1
source

More articles:


All Articles