Way to make ag-grid take 100% page height in angular

Question

I'm trying to make angular ag-grid to take the full height of a web page, so if I have some components like text or title for ag-grid I want to make the displayed grid to take the full height of the page.

I've looked at this question on stack overflow:

How can I make my flexbox layout take 100% vertical space?

And then I'm trying to apply this for angular ag-grid grid

Here is the css I applied, but it is not giving the desired result:

body, html {
  height: 100%;
  margin:2px;
}

my-app .container {
  display: flex;
  flex-direction: column;
}


my-app .container .ag-grid-angular {
  flex-basis: 100%;
  display: flex;
  flex-grow: 1;
}

Here is the link to Stackblitz for a demo:

https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css

I've surrounded the grid with a div using a class .container to be able to apply the display: flex CSS, but this is not helpfull. Is there a way to make the height of the grid to take the full height of the page ?

If I remove the inline style:

style="width: 100%; height: 600px"

for ag-grid-angular, I'm able to see only one row in it.

Pneumothorax

Answer 1

You need to make few changes in your styles.css after removing inline styling of the ag-grid-angular in your template.

Have a look at this Stackblitz demo

Specifically, you need to make heights of the ag-grid-angular element (not just class) and parent containers of it.

my-app, my-app .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

ag-grid-angular{
  height: 100%;
}

Gladiator

The demo I added to the question is just an example, in a larger application, where I'm trying to implement that, there are a number of different element to add like app-root, body app-root, etc... I think we don't have choice here to get deep and use all the intermediate elements and set there height to 100% right ?, so may be there is a better way to do this, not sure. – Pneumothorax

Answer 2

For anyone who had this problem, in ag grid 23 + and Angular 9+ all that matters is that the parent containers height will be set properly, no need to set ag-grid-angular or anything in the global style.

For me the problem was that I was using ag grid inside mat tab group which didn't have 100%.

Babbittry

Please add some more content to your answer, the exact template you have, and what was the exact solution in your case. for me, many parent containers have to set there height to 100% .... – Pneumothorax