Search code examples
tabsangular-materialangular8angular-grid

How to expand Angular Material Tab to show Angular Grid data?

I am using Angular 8 and want to show Angular Grid inside Angular Material Tab in following manner:-

<mat-tab-group>
        <mat-tab label="Request Flow">
            <div class="div-main">
                <ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
                    [gridOptions]="reqDetailGridOptions" [rowData]="reqDetailRowData" [columnDefs]="reqDetailColDef"
                    [getRowHeight]="getRowHeight" [paginationPageSize]=50 (gridReady)="onGridReady($event)">
                </ag-grid-angular>
                <br />                
                <button class="button-internal">Add Subrequest</button>
            </div>
        </mat-tab>
    </mat-tab-group>

The issue is that even if data present in Angular Grid then also Angular Material Tab is not expanding to make Angular Grid visible. It is showing like below:-

enter image description here

However when I put Angular Grid outside Angular Material Tab then the grid is showing its full data.

I tried to use "dynamicHeight" property of "mat-tab-group" but it is of no use.

Please help here.

Solution

  • Below steps worked for me:-

    1. Added [dynamicHeight] = "true" to mat-tab-group.

    2. Added following CSS:-

      .mat-tab-group{ height: 100%; } .mat-tab-body-wrapper { flex-grow: 1; }

      .mat-tab-body { display: flex !important; flex-direction: column; }