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

在对话框组件的样式内，您可以使用

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

Answer 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;
}

Answer 7

当我的html包含mat-dialog-content

时，我遇到了同样的问题

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

然后我更改为

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

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

Answer 8

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

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

8 个答案: