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

Question

我试图删除材料对话框中的垂直滚动。

我正在尝试使用CSS

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

以及父组件中的代码

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

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

是否知道我如何实现这一目标？

谢谢

Answer 1

在对话框组件的样式中：

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

Answer 2

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

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

并添加

panelClass: 'custom-dialog-container'

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

Answer 3

您可以像这样使用scrollStrategy：

let dialogRef = this.dialog.open(ConfirmDialog, {
          scrollStrategy: this.overlay.scrollStrategies.noop(),
          width: '250px',
          data: { id : val.id }
        });

Answer 4

如果你的对话框延伸到整个页面并且右边的滚动条没有消失，我会建议这个选项。

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

这对我有用。

Answer 5

这是我的工具。在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;
}