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> 

see dropdwon plnkr

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

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -