AngularJS ui-grid data appears outside of wrapper?

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 */
}