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

问题描述

我正在使用Eonasdan Bootstrap 3 datetimepicker.当我单击选择器时，glyphicon日历已打开，但部分可见.日历隐藏在网格内.如果我给出"overflow:visible"，则日历可见良好，但那时网格数据的外部也可见.如果单击选择器图标，则希望清晰可见的日历，同时网格数据不会在网格外部溢出.我该怎么办?

I am using Eonasdan Bootstrap 3 datetimepicker. When I click picker, the glyphicon calendar is open, but it is visible partially. The calendar is hiding inside the grid. If I give "overflow:visible", calendar is visible fine but at that time the grid data's are also visible outside. If I click picker Icon, I want to visible calendar clearly, and at the same the the grid data's don't overflow outside the grid. How can I do this?

http://jsfiddle.net/rtzxsa3e/3/

$(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' },
         { 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' },
         { 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;
}
.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
    overflow: visible!important;
}

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

看小提琴，请帮我怎么做?

See the fiddle and please help me how can I do this?

推荐答案

尝试删除

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

并添加

.dropdown-menu{
    position: fixed;
}

但是，然后，您当然需要放置窗口小部件. 希望这会有所帮助.

but then, you need to position the widget of course. Hope this helps.

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