Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？答案

【问题标题】：Angular 5 / Material, how to remove vertical scroll in Mat Dialog?Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？
【发布时间】：2018-10-03 15:11:53
【问题描述】：

我正在尝试移除材质对话框中的垂直滚动。

我正在尝试使用 CSS

.mat-dialog-container /deep/ {
   overflow-y: hidden;
}

还有父组件中的代码

this.dialog._overlayContainer._containerElement.style.overflowY = "hidden";

但是，没有办法做到这一点。

它知道我如何做到这一点吗？

谢谢

【问题讨论】：

标签： typescript angular5 angular-material2

【解决方案1】：

.mat-dialog-content {
  background-color: #eff2f5;
  display: block;
  margin: 0 -24px;
  padding: 0 24px;
  max-height: 109vh;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案2】：

::ng-deep .mat-dialog-container {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

【讨论】：

这个答案有什么新的？

【解决方案3】：

当我的 html 包含 mat-dialog-content 时，我遇到了同样的问题

<div mat-dialog-content>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

然后我改成，

<div>
    <mat-form-field>
        ....
    </mat-form-field>
</div>

它会从对话框中移除垂直滚动条。

【讨论】：

【解决方案4】：

在你的对话框组件的样式中，你可以使用

  ::ng-deep .mat-dialog-container {
    overflow-y: hidden !important;
}

【讨论】：

【解决方案5】：

如果您的对话框延伸到整个页面并且右侧的滚动条没有消失，我建议您使用此选项。

.cdk-global-scrollblock {
    overflow-y: hidden;
}

这对我有用。

【讨论】：

【解决方案6】：

这是我的工具。在TrendDialogComponent的父组件中

const dialogRef = this.trendDialog.open(TrendDialogComponent, {
                    autoFocus: false,
                    panelClass: 'trend-dialog',
                    width: '1360px', height: '680px',
                    data: {tagsTrend: this.tagNames}
                  });

并将这个 css 添加到 style.css

.trend-dialog .mat-dialog-container{
    overflow-y: hidden !important;
}

【讨论】：

【解决方案7】：

转到styles.scss 文件然后添加以下内容：

.custom-dialog-container .mat-dialog-container {
  overflow-y: hidden;
}

并添加

panelClass: 'custom-dialog-container'

作为您发送到 dialogComponent 的 MatDialogRef 对象的一部分

【讨论】：

好的答案应该解释为什么，而不仅仅是添加代码。
它可以工作，但内容在全屏窗口的底部缩小

【解决方案8】：

在你的对话框组件的样式中：

/deep/ .mat-dialog-content {
    overflow-y: hidden !important;
}

【讨论】：