Angular 5 Material - 对话框内的粘性 Div / 组件

Question

这是我的材质对话框。

<h1 mat-dialog-title>Title</h1>

<mat-dialog-content>

  <app-container> </app-container>

</mat-dialog-content>

在 app-container 组件模板中还有 3 个其他组件。

<app-container1> </app-container1>
<app-container2 class="sticky"> </app-container2>
<app-container3> </app-container3> 
<!-- app-container 3 contains a list of items iterated over *ngFor -->

三个容器位于一个可滚动的 MatDialog 中。我希望 app-container2 保持粘性或固定在其位置，这样当您在对话框中滚动时，始终可以看到 app-container2。

.sticky {
   position: fixed !important; //position: sticky !important;
}

我不知道我做错了什么。请帮帮我。

Answer 1

对话框面板及其内容的样式需要属于使用对话框配置的“panelClass”选项指定的类：

.dialogPanel .sticky {
    position: fixed;
}

this.dialog.open(MyDialog, { panelClass: 'dialogPanel' });