title: Bootstrap Datetime picker z-index
body: <p>I am using <a href="https://eonasdan.github.io/bootstrap-datetimepicker/" rel="noreferrer">bootstrap date time picker</a>. 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 <a href="http://jsfiddle.net/tattushenoi/cjonkdf2/" rel="noreferrer">jsfiddle</a> illustrating the same. </p>
  
  <p>I have gone through the css file from the site mentioned above, and tried to set size, z-index etc. But nothing works. <a href="https://i.stack.imgur.com/tsKv6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/tsKv6.jpg" alt="enter image description here"></a></p>
  
  <p>Please help me set an z-index or some other solution to improve visibility. </p>
  
  <pre><code>    &lt;div class="panel panel-info" style="margin-top: 1%"&gt;
                  &lt;div class="panel-heading" id="JnName"&gt;Date Picker&lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;form name="form3" role="form"&gt;
                          &lt;div class="table-responsive" style="size:auto; max-width: 100%;"&gt;
                              &lt;table class="table table-bordered table-striped" id="System Analysis"&gt;
                                  &lt;tbody&gt;
                                      &lt;tr&gt;
                                          &lt;td width="50%"&gt;
                                              &lt;div class="row-fluid"&gt;
                                                      &lt;div class="col-xs-4"&gt;
                                                          &lt;div class="box"&gt;From Date:&lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class='col-sm-8'&gt;
                                                          &lt;div class="form-group"&gt;
                                                              &lt;div class='input-group date' id='rptDateFrom'&gt;
                                                                  &lt;input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false"  value=''  /&gt;
                                                                  &lt;span class="input-group-addon"&gt;
                                                                      &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                                                  &lt;/span&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
  
                                                          &lt;script type="text/javascript"&gt;
                                                              $(function () {
                                                                  $('#rptDateFrom').datetimepicker({
                                                                      //viewMode: 'months',
                                                                      format: 'DD/MM/YYYY',
                                                                       widgetPositioning: 
                                                                       {
                                                                          horizontal: 'left', 
                                                                          vertical: 'bottom'
                                                                       } 
  
                                                                  });
                                                              });
                                                          &lt;/script&gt;
                                                      &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/td&gt;
                                          &lt;td width="50%"&gt;
                                              &lt;div class="row-fluid"&gt;
                                                  &lt;div class="col-xs-6"&gt;
                                                      &lt;div class="box"&gt;From Time [HH]:&lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;div class='col-sm-6'&gt;
                                                      &lt;div class="form-group"&gt;
                                                          &lt;div class='input-group date' id='cboFromTime'&gt;
                                                              &lt;input type='text' name='cboFromTime' class="form-control"  id='cboFromTime' onkeydown="return false"  /&gt;
                                                              &lt;span class="input-group-addon"&gt;
                                                                  &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
                                                              &lt;/span&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                      &lt;script type="text/javascript"&gt;
                                                          $(function () {
                                                              $('#cboFromTime').datetimepicker({
                                                                  //format: 'HH:mm'
                                                                  format: 'HH',
                                                                  widgetPositioning: 
                                                                       {
                                                                          horizontal: 'left', 
                                                                          vertical: 'bottom'
                                                                      }
  
                                                              });
                                                          });
                                                      &lt;/script&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;  
                                          &lt;/td&gt;    
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>