Zestaw wyboru Bootstrap Datetime z-index

Question

Używam bootstrap date time picker. Działa dobrze z wyborem daty i godziny. Ale problemem jest widoczność. Jeśli umieściłem go na jakimkolwiek kontenerze, modal jest widoczny. Ale jeśli spróbuję umieścić go jako td wewnątrz stołu, modal nie jest widoczny. Stworzyłem jsfiddle ilustrujący to samo.

Przeszedłem przez plik css z wyżej wspomnianej witryny i próbowałem ustawić rozmiar, indeks z-Z itp. Ale nic nie działa.

Proszę, pomóżcie mi ustawić wskaźnik Z lub inne rozwiązanie poprawiające widoczność.

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

Dodałem obrazek, aby pokazać problem. Okno wyboru daty jest ukryte za stołem wewnątrz panelu i pojawia się przewijanie. Zamiast tego powinien na to wszystko wyglądać.

Answer 1

Zmień overflow-y: hidden; do 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

Sekcja, do której ją dodałeś, ma ustawiony overflow hidden.

.table-responsive // overflow: hidden 

To zatrzymuje wszystko, co pokazuje poza sobą.

Usuń to i wszystko będzie dobrze - z tego co najmniej ale może złamać inne rzeczy

Dodaj ten css na swojej stronie/arkusza stylów z tabeli w nagłówku:

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