Table with fewer shows empty space between rows and footer[where pagination controls are placed]

[vb8190]

Hi,

We would really like to use this grid for our enterprise application but the table shows a serious side effect when the number of rows are less than its default viewport. Alternatively, the table does not contract height wise when the the number of rows displayed are less(say e.g. 1 or 2 rows). The footer and the pagination tools defined there stay at same place resulting in lot of blank wasted space between the 2 rows displayed and the footer.

Is there any fix for this or any work wround?

We are currently using angular directive wrapping jquery table and it expands and collapses according to the number of rows very nicely. We want to move towards ui-grid because it is supposed to behave very well on large amount of data. But because of the above issue, which is a blocking issue for us, we are unable to migrate to UI-Grid.

Thanks, Vik

[JLLeitschuh]

I'm not entirely sure but you could have a look and see if this will help you out: http://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid

[jnfeinstein]

I'm running into this as well. ui-grid-auto-resize isn't helping. The viewport also appears to be one row too short (10 rows, 9 visible) and adding a scroll. Perhaps the viewport size calculation is borked?

[jnfeinstein]

I confirmed that there isn't any external CSS affecting the heights, so this is happening somewhere within ui-grid. Trying to debug...

[jnfeinstein]

Yes my professional opinion is that the grid height is not including the pager widget height, but it is subtracting the pager widget height from the viewport height. I still have to debug the not showing items issue...

[jnfeinstein]

@vb8190 I was able to fix by adding an ng-style to my ui-grid and adding:

var headerRowHeight = 40, // pre-calculated
    rowHeight = 35, // pre-calculated
    footerRowHeight = 32; // pre-calculated

$scope.styles = {};

$scope.gridOptions.onRegisterApi = function(gridApi) {
  gridApi.core.on.rowsRendered($scope, function(grid) {
    var visibleRows = grid.core.getVisibleRows(),
        numRows = Math.min(visibleRows.length, $scope.gridOptions.paginationPageSize);
    // Override ui-grid's internal height calculation with your own based on the number of
    // rendered rows...
    $scope.styles.height = headerRowHeight + numRows * rowHeight + footerRowHeight;
  });
}

Not ideal but also not too bad.

[sk2160]

@jnfeinstein thank you for the post! I tried this solution and most of the time after the table is rendered a large chunk of the rows are not displayed (around 60% are not displayed). When I click on the vertical scrollbar or zoom out on the browser they appear. Height appears to be getting calculated correctly though. See image attached.

I'm retrieving 466 records. 100 displayed per page in the pagination.

[jnfeinstein]

@sk2160 did you tune the height constants correctly? I used the Chrome inspector to determine their values. You also have to account for any CSS that adds to the height (padding, margins, etc). Again, not ideal...

[sk2160]

@jnfeinstein thank you for the reply. Yes I also used the inspection tool to adjust the constants. It appears to be calculating the height correctly. The problem I'm running into is some of the rows are not displayed. Not sure why it is doing that. If I zoom out on the browser or click next and back on the pagination, the missing rows appear.