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

Posted 2023-02-18

【中文标题】Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？

【英文标题】：Angular 5 / Material, how to remove vertical scroll in Mat Dialog?

【发布时间】：2018-10-03 15:11:53

【问题描述】：

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

我正在尝试使用 CSS

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

还有父组件中的代码

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

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

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

谢谢

【参考方案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;