Turnoff Scrolling within Angular UI ng-grid?

Question

We would like to use the Angular UI ng-grid, but can't seem to find an option to tell the viewport within the grid to not set the overflow to auto and not scroll.

What we'd like to do is have the table/grid height be dynamic based off the size of the number of rows in our grid. We have a fixed max number of rows so there is little concern with having too many rows in the DOM.

Any suggestions on where to go?

Answer 1

I recently ran into same issues and found a solution at https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY

You want ng-grid to initialize after you have data.

The following solution requires using angular-ui:

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()"  />

$scope.getTableStyle= function() {
   var rowHeight=30;
   var headerHeight=45;
   return {
      height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px"
   };
};

Answer 2

Adding this to your CSS will fix your problem:

.ngViewport{
    height:auto !important;
}
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel   {
   width: 100% !important;
}
.ngRow {
   border-bottom:none !important;
}

Answer 3

In your CSS, you can try overriding the height of the div containing the rows, so the rows don't overflow the container:

.ngViewport {
  height: auto !important;
}

You can also fill in the white space that ng-grid leaves for the scrollbar with the row background colour (although unfortunately the data last cell won't expand to fill the gap):

.ngCanvas {
   width: 100% !important;
}
.ngRow {
   width: 100% !important;
}

Depending on your table layout you might need to change some other styles too, but these are the main ones. Also take care not to set a height for the entire ngGrid.

Answer 4

yes there is a plugin which offers such facility its ng-grid-flexible-height.js

you can see the plunker for how its used