CODEWITHSUNDEEP
angularflexboxag-grid
Kakalokia
Kakalokia

Reputation: 3191

Using ag-grid with flexbox

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?

Upvotes: 1

Views: 5346

Answers (1)

Johannes Reuter
Johannes Reuter

Reputation: 3547

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.

Upvotes: 2

Related Questions