Bootstrap datetimepicker日曆不可見

Question

我正在使用bootstrap 3 datetimepicker。此處Bootstrap datetimepicker日曆在網格外部不可見。它隱藏在網格內。請看jsfiddle。

http://jsfiddle.net/rtzxsa3e/

$(function() { 
 
    var data = [ 
 

 
     { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' }, 
 

 
     { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' }, 
 
]; 
 
    var obj = { 
 
     height:300, 
 
     title: "ParamQuery Grid with JSON Data", 
 
     scrollModel:{autoFit:true, theme:true} 
 
    }; 
 

 
    obj.colModel = [ 
 

 
     { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" }, 
 
     { title: "Company", width: 200, dataType: "string", dataIndx: "company" }, 
 
     { title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false, 
 
     render : function(){ 
 
      var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';                                            
 

 
      return date; 
 
     } 
 
     }, 
 
     { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" }, 
 
    ]; 
 

 
    $('body').on('mouseover','.input-group',function() { 
 

 
    $(".input-group.date").datetimepicker(); 
 

 
    });  
 

 
    obj.dataModel = { data: data }; 
 

 
    $("#grid_json").pqGrid(obj); 
 
}); 
 

 

td.pq-grid-cell{ 
 
    overflow:visible !important; 
 
} 
 
span.input-group-addon { 
 
    width: 27px; 
 
}

<div id="grid_json" style="margin:100px;"></div>

如果我點擊拾取，引導日曆是開放的，但它是不可見整個日曆。我想在網格外顯示日曆。我已經給出了「溢出：可見」和「可見性：可見」，但仍然無法正常工作。請幫我做這個。

Answer 1

您還需要從父容器中刪除overflow:hidden;。

添加這個CSS：

.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner { 
    overflow: visible!important; 
} 

演示：http://jsfiddle.net/rtzxsa3e/2/

我不配套使用!important這裏。你很瞭解你的html代碼。如果你可以指定更多特定的選擇器，可以覆蓋網格插件的默認CSS，那麼這也可以。