Ag-Grid has zero height in a flexbox layout

Question

My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.

How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.

Here's how I am creating my layout:

<div style="height:100%;display:flex;flex-direction:column;">
  <div style="height:250px;flex-grow:0;">
    <h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
    <ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
                     [columnDefs]="columnDefs"
                     [rowData]="rowData"
    >
    </ag-grid-angular>
  </div>
  <div style="flex-grow:1;">
    <h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
    <p>How can I get the grid to be aware of my div's actual height?</p>
    <ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
                       [columnDefs]="columnDefs"
                       [rowData]="rowData"
    >
    </ag-grid-angular>       
  </div>
</div>

I want the grid in the second flex item to have an appropriate height. How can I do this?

Look through the related GitHub issues, looks like there's some hope: https://github.com/ag-grid/ag-grid/issues?utf8=%E2%9C%93&q=flex — thirtydot, May 20 '18 at 14:46

score 3 · Answer 1 · answered Sep 11 '18 at 11:20

In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:

  .item-1 {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }

Plunker Screenshot running in Chrome

I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?

score 1 · Answer 2 · answered Jul 08 '20 at 16:16

1

try setting auto height on grid ready event

 this.gridApi.setDomLayout('autoHeight');

details: https://www.ag-grid.com/javascript-grid-width-and-height/

answered Jul 08 '20 at 16:16

Kuldeep Bora

4,072
3
12
16

1

If I understand correctly, this isn't quite the same thing: it fixes the problem of the grid being zero height, but it attempts to size the grid to its contents (and may incur a performance penalty for a large number of rows, since it tries to measure every row), instead of the default behavior of sizing the grid to 100% of the available height. – Josh Kelley Mar 15 '21 at 18:23

Ag-Grid has zero height in a flexbox layout

2 Answers2