ng-grid table height

10,074 views
Skip to first unread message

Nathan Smith

unread,
Jan 13, 2013, 7:35:37 AM1/13/13
to ang...@googlegroups.com
Is there a way to specify the height of a ng-grid table to be the maximum height of all displayed rows? I'd rather have the user scroll the page than the grid.


m48u

unread,
Jan 17, 2013, 6:41:14 AM1/17/13
to ang...@googlegroups.com
Hi,
I don't know if there is an option in ng-grid but you could make use of your data.
add a style attribute to your grid container like 

<div ng-grid="gridOptions" style="height: {{dataForGrid.lenght() * rowHeight}}px"  />

maybe this does not work on the fly but hopefully you know what I mean

Cheers

Joe Hanink

unread,
Jun 12, 2013, 7:41:50 PM6/12/13
to ang...@googlegroups.com
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"
   };
};

Grant Rettke

unread,
Jun 13, 2013, 7:19:37 PM6/13/13
to ang...@googlegroups.com
We are trying dynamic ng-grid based sizing that forces column headers
to be visible.
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>



--
Grant Rettke | ACM, AMA, COG, IEEE
gre...@acm.org | http://www.wisdomandwonder.com/
“Wisdom begins in wonder.” --Socrates
((λ (x) (x x)) (λ (x) (x x)))
“Life has become immeasurably better since I have been forced to stop
taking it seriously.” --Thompson

Mike Petrovich

unread,
Sep 22, 2014, 4:10:54 PM9/22/14
to ang...@googlegroups.com
I have to point out the irony of requiring the addition of a hard-coded hack in order to disable such an opinionated feature.

Creation of a scroll pane should be an optional add-on feature that's enabled by default, not one you have to hack your way to remove. Have we learned nothing from jQuery spaghetti code days?

Лъчезар Райчев

unread,
Jan 8, 2015, 4:13:46 AM1/8/15
to ang...@googlegroups.com, nat...@gmail.com
Yeah, i have to say I am a little frustrated with that already... 


On Sunday, January 13, 2013 2:35:37 PM UTC+2, Nathan Smith wrote:
Is there a way to specify the height of a ng-grid table to be the maximum height of all displayed rows? I'd rather have the user scroll the page than the grid. 
<div ui-grid="gridOptions" ng-style="{{ngStyle}}" style="{{ngStyle}}"></div>
I calculate the height and everything, witgh ng-style and only with style, it does not matter. 
 The grid spreads as much as it needs but the viewport stays shrinked and always 343px for some reason...What the hell does this 15k lines of code grid do???  2 frickin days now that this is not working, struggling with one fricking height, finally i come to a post which suggest me to do what i was tried to do 2 days in different ways.... Such a bullshit grid with so many many flaws.

Лъчезар Райчев

unread,
Jan 8, 2015, 4:23:52 AM1/8/15
to ang...@googlegroups.com, nat...@gmail.com
I mena, if I only do ng-style, the style attribute is added by the grid itself with height of 343 px and the grid is shrinked, if i do height directly in the style attribute, then the grid spreads as told (in my case 765px) but the viewport stays with height as much as 343px which is WTF OMG frickin insane. Then i tried another thing, by row calculation i get the height 765px, i put it to the grid, it does spread by viewport and canvas are still shrinked, i chened from the css their height to 100% !important, and now the interesting things comes up, they spread as well, but instead ot 25 rows*30.6px only 15 are printed and the space that is left in the grid is blank, WHAT DA F*CK, can someone explain ?  


On Sunday, January 13, 2013 2:35:37 PM UTC+2, Nathan Smith wrote:

Niall Crosby

unread,
Mar 5, 2015, 6:38:19 PM3/5/15
to ang...@googlegroups.com, nat...@gmail.com

I'm implementing my own grid, following my frustration using ng-grid. What you are looking for is exactly one one of the features I have. You can select to 'not' have scrolls at all, and the table will fill whatever room it needs to render. You do this by using by setting "dontUseScrolls: true" in the grid options.

You can check my grid out at http://www.angulargrid.com
Reply all
Reply to author
Forward
0 new messages