I'm trying to use bootstrap datepicker (via angulart ui bootstrap) inside an ng-grid.
I'm setting the grid with:
$scope.gridSettings = {
data: "myData",
enableCellSelection: true,
enableRowSelection: false,
enableCellEditOnFocus: true,
columnDefs:
[
{ field: "StartDate", displayName: "Date",
editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="COL_FIELD" />' }
]
};
And it works, when I click a cell it changes into a datepicker - but - the calendar popup is clipped by the cell boundaries - this means that I can only see the part of the popup that fits into the cell (the top border)
What do I need to set to allow the datepicker popup to appear above the grid instead of being clipped to the cell?
Update: tried switching from Angular UI bootstrap to angular-strap, now the datepicker works but I have the exact same problem with the timepicker
Use datepicker-append-to-body=true
$scope.gridSettings = {
data: "myData",
enableCellSelection: true,
enableRowSelection: false,
enableCellEditOnFocus: true,
columnDefs:
[
{ field: "StartDate", displayName: "Date",
editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" datepicker-append-to-body=true ng-model="COL_FIELD" />' }
]
};