UI-GRID Height Of Grid Percentage Of The Screen Area

Question

What is the best way to handle the height of the ui-grid. We want to have it take up 85 percent of the screen and the footer take up 15%.

Whey I set the height of the grid to 85%, it doesn't do anything.

When I change the px height, that pushes the screen down.

Thanks

Answer 1

A grid's height, when defined as a percentage, is relative to the height of its parent container. This is the same as any other HTML element. If the parent element only has the grid in it, then there's nothing to be 85% of.

This is because the grid virtualizes its content. Despite having, say, 500k rows in its data set, it has no idea how many of them it should be showing at a time.

Luckily in your case, setting the grid height with viewport percentage would probably work:

.grid {
  height: 98vh;
}

That tells the grid to be almost the full height of the browser viewport (note that 100vh is a bit too much).

See this plunker for a demo: http://embed.plnkr.co/65ScOLedYpm1rSKztQkE/preview

There's some more information in this post: http://brianhann.com/make-ui-grid-take-up-the-whole-page/

Hope that helps!