javascript - template - bootstrap dashboard buy

Bootstrap datetimepicker calendar no está visible

Question

Estoy usando bootstrap 3 datetimepicker. Aquí Bootstrap datetimepicker calendar no está visible fuera de la grilla. Se está escondiendo dentro de la grilla. Por favor mira el 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>

Si hago clic en el selector, el calendario de arranque está abierto, pero no está visible todo el calendario. Quiero mostrar el calendario fuera de la grilla. He dado "desbordamiento: visible" y "visibilidad: visible" pero aún no está funcionando. Por favor, ayúdame para hacer esto.

Answer 1

Debes eliminar el overflow:hidden; de los contenedores principales también.

Agrega este css:

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

Demostración: http://jsfiddle.net/rtzxsa3e/2/

No apoyo el uso de !important aquí. Conoces bien tu código html. Si puede asignar un selector más específico que pueda anular el css predeterminado del plugin de cuadrícula, eso también funcionará.