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.

W

Answer 1

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 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

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

you can see the plunker for how its used

Answer 4

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"
   };
};