1

I have been trying to use ag-grid with flex layout, however it doesn't appear to work as expected.

The following stackblitz has a reproduceable example: https://stackblitz.com/edit/angular-zwpdhl

I have the ag-grid sitting under a parent with column flex layout, and the parent itself sits under mat-sidenav-content. My expectation is that ag-grid takes the remaining height in the flex column, and if the grid data is too large, then the grid gets a vertical scrollbar. However what happens is the grid collapses to a horizontal line with no height. I have tried setting the grid position to absolute, with value of 0 for (top, left, right, bottom), but that breaks the flex column because the grid now overlaps other elements in the column. The only workaround seems to set a fixed height to the grid, but that defeats the point of flex layout.

Anyone came across this issue before? Any ideas how to get it to work correctly with flex layout?

Kakalokia
  • 3,191
  • 3
  • 24
  • 42

1 Answers1

2

Your problem is the extra div inside the mat-sidenav-content - without it the grid renders just fine:

<mat-sidenav-content fxLayout="column" fxLayoutGap="5px" fxFlex>
    <div>Toolbar</div>
    <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
    </ag-grid-angular>
</mat-sidenav-content>

instead of

<mat-sidenav-content>
  <div fxLayout="column" fxLayoutGap="5px">
     <div>Toolbar</div>
     <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
       </ag-grid-angular>
  </div>
</mat-sidenav-content>

Explanation: the mat-sidenav-content has the desired height of the whole column, but is no flex container itself - this means the <div fxLayout="column" fxLayoutGap="5px"> is laid out as an ordinary block element with its height defined by the content. The ag-grid-angular element has a defined height of 100% and as a child of a flex column container, that causes some problems. By just removing this extra div, height 100% on the grid element works because mat-sidenav-content already has a defined height.

Johannes Reuter
  • 3,501
  • 19
  • 20
  • Thanks for your answer. I seem to have also solved the problem by just setting the height on the extra div inside mat-sidenav-content to be 100%. Example updated at https://stackblitz.com/edit/angular-7nabov – Kakalokia Nov 08 '18 at 20:46