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?

Kisangani

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

Palpitation

I tried it, I wrote: ng-style="height: {{formData.watchCountData.length * 30}}px"> but it doesn't work :( – Zamarripa

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

Darden

I would leave .ngViewport out of the second list and replace .ngTopPanel by .ngHeaderContainer. ngViewport is supposed to get its size from ngCanvas just as ngTopPanel is supposed to work with ngHeaderContainer. – Esmerolda

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.

Unrivaled

That approach certainly works...but it doesn't look right because the rows don't extend full-width into no-longer-visible scrollbar column. – Angeliqueangelis

Yeah, I didn't notice that before. I was hoping the CSS would be easier to implement but unfortunately it doesn't seem so. :( I have updated my answer but there is still dead space at the end where the scroll bar would have been -- I haven't figured out how to make the last cell fit the remaining width. – Unrivaled

These seems to work for me. Removed the empty space where the scroll bar used to be as well, just there's some funkiness with the cell border on the end column, but I can live with that - was better than it was before. – Lagting

If you set .ngFooterPanel and .ngTopPanel to width: 100% !important as well it will fix the right most table border. It had been disappearing on me prior to this. – Lagting

So what would be the grid style height? – Zamarripa

+1 for the reminder to not set height for the entire ngGrid, I totally forgot about that – Decussate

The grid still steals scroll events and the page stops scrolling down. – Fatty

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

Tipton

Vinod - Thank you, but your plunker doesn't address what I was requesting. I want the grid to adjust its height based on the number of rows. Ultimately I do not want any scrollbars in the grid. I want to use the entire document scrollbar instead. – Kisangani

Unless i'm misunderstanding your requirements, you do not want scroll bar in grid but the plunker also neither have scroll-bar in the grid and according to the number of rows height is adjusted – Tipton

I've added more rows to a fork of your plunker Updated Plunker. What I see is a table with a height for about 10 rows but there is over 50 in the grid. I see a scrollbar within the grid. – Kisangani

I see the same thing RullDawg mentioned – Hamforrd