javascript - drop-down menu hiding behind the panel -
bootstrap menu hide behind panel, no effect z-index:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <div class="panel panel-default"> <div class="panel-heading"> <i class="fa fa-calendar fa-fw"></i> system years <div class="pull-right"> <button type="button" class="btn btn-info btn-xs btn-add-year " data-toggle="tooltip" title="add year"><i class="fa fa-plus"></i></button> </div> </div> <!-- /.panel-heading --> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered table-hover table-striped"> <tbody> <tr> <td> <strong>2014</strong> <div class="btn-group"> <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> menu 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:;">all</a></li> <li><a href="javascript:;">other</a></li> </ul> </div> </td> </tr> <tr> <td> <strong>2015</strong> <div class="btn-group"> <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> menu 2 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:;">all</a></li> <li><a href="javascript:;">other</a></li> </ul> </div> </td> </tr> </tbody> </table> </div> <!-- /.table-responsive --> </div> <!-- /.panel-body --> </div>
issue related overflow of parent div. see following code div , see image reference:
@media screen , (max-width: 767px) tables.less:180 .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: visible; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; height: 120px; }
Comments
Post a Comment