CODEWITHSUNDEEP
htmlcssangular
Dennis Ich
Dennis Ich

Reputation: 3785

Angular mat-tab and mat-table scrolling problem in FF

I have a table inside a mat-tab that expands to whatever height it needs and does not show a scrollbar when the maximum height of the panel is reached. The mat-tab-group will breach the height of its parent container and the whole page will get a scrollbar just the tab getting a scrollbar.

This does not manifest in Chrome and I can only see it in Firefox so far. Below is some example code I made to reproduce the behavior. The component in which the tab-group is embedded has a max height set. The tabs-panel is supposed to take all remaining space in it (flex: 1)

<mat-tab-group class="tabs-panel">
  <mat-tab label="CoolLabel">
    <mat-table [dataSource]="dswithacouplerows">
      <ng-container matColumnDef="mycol">
        <mat-header-cell *matHeaderCellDef>
        </mat-header-cell>
        <mat-cell *matCellDef="let row">bla</mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="mycols; sticky: true"></mat-header-row>
      <mat-row *matRowDef="let row; columns: mycols;" class="get-primary-important"></mat-row>
    </mat-table>
  </mat-tab>
</mat-tab-group>

.tabs-panel {
  flex: 1;
  width: 100%;
}

Upvotes: 3

Views: 2876

Answers (1)

Angel Dinev
Angel Dinev

Reputation: 489

I had a similar scrolling issue with mat-tab-group in FF/IE and thankfully to this comment in GitHub managed to fix it with setting min-height prop for the mat-tab-group element:

mat-tab-group {
    min-height: 500px;
}

Upvotes: 2

Related Questions