1

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.

simple user
  • 349
  • 3
  • 22
  • 44

2 Answers2

3

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; }

simple user
  • 349
  • 3
  • 22
  • 44
  • 1
    I had to use all 4 of these statements, but with ::ng-deep as @Houssem Melliti indicated. – zhark Jan 31 '20 at 04:10
3

This worked for me: 

::ng-deep.mat-tab-body-wrapper { 
    flex-grow: 1; 
}

you have to override mat-tab-body-wrapper style with ::ng-deep

Houssem Melliti
  • 41
  • 2