Bootstrap Datetime picker z-index

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;
}