Bootstrap datetimepicker日历不可见 [英] Bootstrap datetimepicker calendar is not visible

问题描述

我使用bootstrap 3 datetimepicker。这里Bootstrap datetimepicker日历在网格外部不可见。它隐藏在网格内。请参阅jsfiddle。

http://jsfiddle.net/ rtzxsa3e /

  $（function（）{var data = [{rank：1，company：'Exxon Mobil'，DatePicker ：'04 / 04/1990 00:00'，收益：'339938.0'，profit：'36130.0'}，{rank：2，company：'Wal-Mart Stores'，DatePicker：'05 / 03 / '，revenue：'315654.0'，profit：'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-groupstyle = width =textvalue =04width = 150px; margin-left：50px; text-align：center>< div class =input-group dateid =datetimepicker123> 05/2012 00:00class =form-control>< span class =input-group-addon>< span class =glyphicon-calendar glyphicon>< / span> / span>< / div>< / div>';归期; }}，{title：Revenues（$ millions），width：150，dataType：float，align：right，dataIndx：revenue}， $（'body'）。on（'mouseover'，'。input-group'，function（）{$（。input-group.date）。datetimepicker obj.dataModel = {data：data}; $（＃grid_json）。pqGrid（obj）;}）;  

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

 < div id =grid_jsonstyle =margin：100px;>< / div>  

/ p>

如果我点击选择器，引导日历是打开的，但它是不可见的整个日历。我想在网格外显示日历。我给了溢出：可见和可见性：可见，但仍然不工作。

解决方案

您需要删除 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的网格插件，那么也将工作。

I am using bootstrap 3 datetimepicker. Here Bootstrap datetimepicker calendar is not visible outside the grid. It is hiding inside the grid. Please see the 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>

If I click the picker, bootstrap calendar is open but it is not visible the whole calendar. I want to display the calendar outside the grid. I have given "overflow:visible" and "visibility:visible" but still it is not working. Please help me for do this.

解决方案

You need to remove overflow:hidden; from parent containers also.

Add this css:

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

Demo: http://jsfiddle.net/rtzxsa3e/2/

I am not supporting the use of !important here. You know your html code well. If you can assign more specific selector which can override the default css of grid plugin, then that will also work.

这篇关于Bootstrap datetimepicker日历不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！