CODEWITHSUNDEEP
flexboxag-gridag-grid-ng2
Chris Farmer
Chris Farmer

Reputation: 25415

Ag-Grid has zero height in a flexbox layout

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/.

enter image description here

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?

Upvotes: 11

Views: 8116

Answers (2)

Kuldeep Bora
Kuldeep Bora

Reputation: 4912

try setting auto height on grid ready event

 this.gridApi.setDomLayout('autoHeight');

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

Upvotes: 1

Alastair Mackenzie
Alastair Mackenzie

Reputation: 41

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?

Upvotes: 4

Related Questions