Bootstrap Datetime picker z-index - html

Question

I am using bootstrap date time picker. Its working fine with the date and time selection. But the problem is the visibility. If I put it outside any sort of container the modal is visible. But If I try to put it as a td inside a table, then the modal is not visible. I have created a jsfiddle illustrating the same.
I have gone through the css file from the site mentioned above, and tried to set size, z-index etc. But nothing works.
Please help me set an 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 have added an image to show the problem. The date picker window is hidden behind the table inside the panel and a scroll appears. Instead of that it should appear on top of all that.

Answer 1

Change overflow-y: hidden; to 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 have added it in has overflow hidden set on it.
.table-responsive // overflow: hidden
This stops anything showing outside of itself.
Remove that and all will be good - with this at least but it might break other things
Add this css to your page/style sheet with the table in the header:
.table-responsive {
overflow: visible !important;
}