Question

我在mat-tab中有一张桌子，它可以扩展到所需的高度，并且在达到面板的最大高度时不显示滚动条。 mat-tab-group将超出其父容器的高度，整个页面将获得一个滚动条，而该标签将获得滚动条。

这不会在Chrome中显示，到目前为止，我只能在Firefox中看到它。下面是我制作的一些示例代码来重现此行为。嵌入选项卡组的组件具有最大高度集。标签面板应该占据其中的所有剩余空间（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%;
}

Answer 1

我在FF / IE中遇到了与 mat-tab-group 类似的 scrolling 问题，幸好GitHub中的this comment设法通过设置< mat-tab-group元素的strong> min-height 道具：

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

FF中的角度mat-tab和mat-table滚动问题

1 个答案: