AngularJS ui-grid data appears outside of wrapper? - angular-ui-grid

Question

HTML
<div id="landingGrid" ui-grid="landingGrid" class="landingGrid" ui-grid-pagination></div>
JS
$scope.submitted_columns = [
{field: "application_id",
visible: false},
{field: "date_entered",
displayName: "Created On",
enableFiltering: true,
callClass: 'text-center',
width: '10%',
cellFilter: 'date : "MM/DD/YYYY"'},
{field: 'application_name',
displayName: "Name",
enableFiltering: true,
width: '15%',
cellClass: 'text-left'},
{field: 'merchant_name',
displayName: "Merchant DBA",
enableFiltering: true,
width: '15%',
cellClass: 'text-left'},
{field: 'contract_type',
displayName: "Contract Type",
enableFiltering: false,
width: '10%',
cellClass: 'text-left'},
{field: 'funding_type',
displayName: "Funding Type",
enableFiltering: false,
width: '8%',
cellClass: 'text-left'},
{field: 'application_status',
displayName: "Status",
enableFiltering: true,
width: '8%',
cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row, col) === "saved") {
highlightRowsByStatus(rowRenderIndex, 'red');
return "text-left";
}
if (grid.getCellValue(row, col) === "wait_on_docs" || grid.getCellValue(row, col) === "contract_out") {
highlightRowsByStatus(rowRenderIndex, 'orange');
return "text-left";
}
}
},
{field: 'purchase_price',
displayName: "Offer Amount",
enableFiltering: false,
width: '10%',
cellClass: 'text-right',
cellFilter: 'currency'},
{field: 'decline_reason',
displayName: "Decline Reason",
enableFiltering: false,
width: '10%',
cellClass: 'text-left'},
{field: 'iso_dba',
displayName: "Sales Agent",
enableFiltering: true,
cellClass: 'text-left'}
];
$scope.landingGrid = {
useExternalSorting: true,
enableSorting: true,
enableFiltering: true,
columnDefs: $scope.submitted_columns,
paginationPageSizes: [25, 50, 100, 250],
paginationPageSize: 25,
enableCellSelection: false,
enableRowSelection: false,
enableCellEdit: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
console.debug(sortColumns);
});
}
};
LandingFactory.getSubmittedNWApplicationsForUserID(UserObject.userId, $scope.recordsStart, $scope.recordsLimit).then(
function successCallback(response) {
if (typeof response.data.data !== undefined) {
$scope.landingGrid.data = response.data.data;
} else {
console.log("No records to return");
}
}, function errorCallback(response) {
console.debug("Error returned from getSubmittedNWApplicationsForUserID", response);
});
};
The data result is correct, the grid itself looks great - pagination works, filtering works, sorting works but the data rows are being rendered below the pagination footer. Anyone have any ideas?

Answer 1

Problem found! In ui-grid.min.css the following code needs to be changed:
.ui-grid-header-cell-wrapper {
position: relative;
display: table;
box-sizing: border-box;
height: 100%; /* REMOVE ME */
}