ng-grid Auto / Dynamic Height

Question

How do I get ng-grid to auto resize its height based on the page size? The documentation on ng-grid's site uses a fixed height. The best solution I've seen comes from this link:

.ngViewport.ng-scope {
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer {
    width: auto !important;
}

This does not work with server-side paging. I've copied the server-side paging example from ng-grid's site, and applied the css above, but as you can see, only the first 6 rows are shown: http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K?p=preview

And { height: 100% } does not work...

Answer 1

You can try using the ng-grid Flexible Height Plugin, all you need to do is add this plugin to the plugins property in grid options and he'll take care of the rest .

Example:

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    plugins: [new ngGridFlexibleHeightPlugin()]
};

Live example: http://plnkr.co/edit/zNHhsEVqmpQmFWrJV1KQ?p=preview

Answer 2

If you don't want to add any plugins I've implemented an easy solution to dynamically change the table's height strictly based on the visible rows. I am using Ui-Grid-Unstable v3.0. No need to touch CSS.

My HTML looks like:

<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>

In your controller add:

$scope.$watch('gridApi.core.getVisibleRows().length', function() {
    if ($scope.gridApi) {
        $scope.gridApi.core.refresh();
        var row_height = 30;
        var header_height = 31;
        var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
        $('.grid').height(height);
        $scope.gridApi.grid.handleWindowResize();
    }
});

And to turn off scrolling add the following line where gridOptions is initialized:

enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,

Make sure uiGridConstants is passed into your controller:

angular.module('app').controller('mainController', function($scope, uiGridConstants) { ... 

Hope this helps!