Angular 5材质-对话框中的粘性Div /组件

Question

这是我的材料对话框。

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

<mat-dialog-content>

  <app-container> </app-container>

</mat-dialog-content>

在应用程序容器组件模板中，还有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' });