Bootstrap datetimepicker calendar is not visible

Question

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.

Answer 1

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.