Time collector z-index

Question

I am using the bootstrap date time picker . It works great with date and time selections. But the problem is visibility. If I take it out of some container, the modal view. But if I try to present it as td inside the table, then the modality will not be visible. I created jsfiddle illustrating the same thing.

I looked at the css file from the site mentioned above and tried to set the size, z-index, etc. But nothing works.

Please help me install a z-index or some other solution to improve visibility.

<div class="panel panel-info" style="margin-top: 1%"> <div class="panel-heading" id="JnName">Date Picker</div> <div class="panel-body"> <form name="form3" role="form"> <div class="table-responsive" style="size:auto; max-width: 100%;"> <table class="table table-bordered table-striped" id="System Analysis"> <tbody> <tr> <td width="50%"> <div class="row-fluid"> <div class="col-xs-4"> <div class="box">From Date:</div> </div> <div class='col-sm-8'> <div class="form-group"> <div class='input-group date' id='rptDateFrom'> <input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false" value='' /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <script type="text/javascript"> $(function () { $('#rptDateFrom').datetimepicker({ //viewMode: 'months', format: 'DD/MM/YYYY', widgetPositioning: { horizontal: 'left', vertical: 'bottom' } }); }); </script> </div> </div> </td> <td width="50%"> <div class="row-fluid"> <div class="col-xs-6"> <div class="box">From Time [HH]:</div> </div> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='cboFromTime'> <input type='text' name='cboFromTime' class="form-control" id='cboFromTime' onkeydown="return false" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> <script type="text/javascript"> $(function () { $('#cboFromTime').datetimepicker({ //format: 'HH:mm' format: 'HH', widgetPositioning: { horizontal: 'left', vertical: 'bottom' } }); }); </script> </div> </div> </td> </tr> </tbody> </table> </div> </form> </div> </div> 

I added an image to show the problem. The date picker is hidden at the table inside the panel and a scroll appears. Instead, it should appear on top of it all.

Answer 1

Change overflow-y: hidden; on overflow-y: visible;

 .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: visible; // Add overflow-y visible overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid #ddd; -webkit-overflow-scrolling: touch; } 

Fiddle: http://jsfiddle.net/cjonkdf2/1/

Answer 2

The section you added has overflow hidden .

 .table-responsive // overflow: hidden 

This stops everything that appears outside of itself.

Remove it and everything will be fine - with it, at least, but it can break other things.

Add this css to your page / stylesheet with the table in the header:

 .table-responsive { overflow: visible !important; }