css - Custom Drop down Z-Index Issue -
i have bootstrap drop down on modal dialog. after clicking on drop down button drop down menu appears under form. there way fix issue, without using "position:fixed",because using fixed attribute facing other issues.
<div id="dialog" title="basic dialog" ng-show='showdialog'> <div class="container"> <h2>dropdown</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">dropdown example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">aaaaaa</a></li> <li><a href="#">bbbbbb</a></li> <li><a href="#">cccccc</a></li> <li><a href="#">dddddd</a></li> <li><a href="#">eeeeee</a></li> <li><a href="#">ffffff</a></li> </ul> </div> </div> </div>
the problem dialog, wich div, efectively "contains" dropdown , it's contents, drowpdown stacking context surrogated it.
you can add css rule overcome problem, take doesn't have side effects in other dialogs on app:
<style> .ui-dialog, #dialog, #container { overflow:visible; } </style>
you have great article here explaining stacking contexts z-index isn't people think...
Comments
Post a Comment