Question

<widget-shell [title]="data.title" (closeButtonClicked)="onCloseButtonClick($event)">
<mat-tab-group (selectedTabChange)="tabChange()">
    <mat-tab label="Data">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged" [settings]="graphSettings.dataSeries"></graph-bar>
    </mat-tab>
    <mat-tab label="SMS">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged"  [settings]="graphSettings.smsSeries"></graph-bar>
    </mat-tab>
    <mat-tab label="Voice">
        <graph-bar *ngIf="graphSettings" [tabChanged]="tabChanged"  [settings]="graphSettings.voiceSeries"></graph-bar>
    </mat-tab>
</mat-tab-group>

在CSS中：

::ng-deep .mat-tab-body-content {
      overflow: visible !important;
    }

通过使用上面的css解决了这个问题，但还有其他一些方法我们可以在不使用!important
的情况下实现相同目标

Answer 1

是的，有！

您需要设置overflow: visible;，但事情就是这样：您需要确保您的CSS优先于角度的样式。请看一下CSS优先级：http://www.standardista.com/css3/css-specificity/和http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

因此，您可以使用开发人员工具检查要覆盖的组件的样式，然后优先于该样式。

简单提示：复制并粘贴您在开发工具中找到的顺序，然后将您的样式放入内部并确保您的文件覆盖比角度材质的css更晚

Answer 2

这是一个更好的解决方案（已在v-7上测试）：

<mat-tab-group [dynamicHeight]='true'>

Answer 3

这是mat选项卡的默认行为。即使我也遇到了同样的问题。我通过将上述代码放在css文件中来解决了这个问题，

:: ng-deep .mat-tab-body-content { 溢出：可见！重要 }

记住：不要忘记在CSS中添加！important，否则它将被忽略并且永远不会应用于您的标签页。

当我在角度材料的标签之间切换时，会显示滚动条？

3 个答案: