Angular mat 对话框奇怪的行为：打开时主应用程序永久向上收缩

Question

我正在使用动态 MatDialog 进行确认，它会在单击按钮时打开并正确显示消息，除了每次单击触发对话框的任何按钮时，都会出现 cdk-overly-container在索引中，低于 app-root 并永久向上移动 app-root - 即使在对话框关闭后也是如此。

服务 class:

@Injectable({
  providedIn: 'root'
})
export class DialogService {

  constructor(private dialog: MatDialog) { }

  confirmDialog(data: ConfirmDialogData): Observable<boolean> {
    return this.dialog
    .open(ConfirmationDialogComponent, {
      data,
      width: '400px'
    })
    .afterClosed()
  }
}

分量:

@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {
  constructor(private dialogService: DialogService, 
    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData) { }
}

styles.css

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

body {font-family: 'Poppins', sans-serif;}

a,
a:visited,
a:hover {
    text-decoration: none;
    color: inherit;
}

.cdk-overlay-container { position: fixed; }

我看了很多关于这个问题的讨论，关于z-index等等，aber无法解决这个问题。我正在使用 Angular 13，主要是 Google Chrome。任何人都可以解决这个问题或帮助解决这个问题吗？

Answer 1

我可以通过在 styles.css 文件中应用以下内容来解决问题：

.mat-dialog-content {
    max-height: 100% !important;
}

我无法解释为什么这是必要的。但是对话框在触发时停止将内容向上移动。以防万一有人处理同样的问题。也许有人可以解释我的代码中是什么原因造成的，或者为什么这个 css 元素是必需的。

Angular mat 对话框奇怪的行为：打开时主应用程序永久向上收缩

Angular mat dialog weird behavior: shrinking the main app upwards permanently when openned

angular-material

angular

mat-dialog