0

Bootstrap datetimepicker calendar is open in outside of the grid. It is not open in a correct position. Please look at the fiddle and tell me how can I do this. I want the calendar is open in a correct position and if it is required the calendar may be visible outside the grid also. I dont wonna hide the calendar at any time. Please help me for do this

http://jsfiddle.net/rtzxsa3e/11/

$(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' },
        { 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;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);
});

     
span.input-group-addon {
  width: 27px;
}
.pq-grid td.pq-grid-cell{overflow:visible}
<div id="grid_json" style="margin:100px;"></div>

.

kali dass
  • 37
  • 1
  • 1
  • 11

2 Answers2

0

Hochas is right, it's because you have styles that are affecting that in Bootstrap. To override them, and to keep the datepicker within the table cell, you can apply these CSS styles: 

.form-group {
    margin-left: 0px !important;
    width: 100% !important;
}
  • Please open fiddle. I use this css also but its not working. See in fiddle and open the 5th or 6th row. Calendar is hiding inside the grid. I can't select time. – kali dass Apr 13 '15 at 06:54
  • @kalidass In that case you need to increase the z-index for the `.datepicker` class using jQuery. –  Apr 13 '15 at 07:16
0

This thread handles the same problem which you have described. You can either set the z-index of the calendar popup when it opens or add a css rule with the !important flag and set the index to something very high like shown.

Community
  • 1
  • 1
jokarl
  • 1,913
  • 2
  • 24
  • 52
  • In this same fiddle how can I do? Its not working. I tried that set timeout function also. Calendar is not overflow ouside of the table. It is inside the grid only. I need to display the whole calendar without hide. – kali dass Apr 13 '15 at 07:20
  • @ZeroRequiem The open calendar window doesn't have a class called datepicker – jokarl Apr 13 '15 at 07:35
  • Look at this fiddle. Here it is working. But calendar is open in left corner. How to fix in a correct position. – kali dass Apr 13 '15 at 07:45
  • Please look at this fiddle. and help me how can I do this? – kali dass Apr 14 '15 at 04:56
  • @hochas The library in use adds it via JavaScript. –  Apr 16 '15 at 04:12