Question

当我滚动Dialog的内容时，右上角close和右下角Ok按钮也会滚动。

我想使这些button固定，而不是滚动显示，以便我可以随时close对话框。

这是我的代码

<div md-dialog-content>
     <button class="close" mat-button (click)="onNoClick()">
        <mat-icon>close</mat-icon>
     </button>

//here my table content
    
</div>
<div mat-dialog-actions>
    <button id="matbuttonClosedownSide" color="primary" mat-button [mat-dialog-close]="null">Ok</button>
</div>

代码以打开模型

const dialogRef = this.dialog.open(myModalComponent, {
width: '80%',
height:'80%',
panelClass: 'my-dialog',
disableClose: true ,
data:this.data[index]
});

Answer 1

我遇到了同样的问题，如下所示：

.my-dialog {
  .mat-dialog-container {
      position: relative;
      padding-bottom: 50px; // height of  your sticky footer
  }

  .sticky-modal-footer {
    position: absolute;

    bottom: 0;
    left: 0;
    width: 100%;

    border-top: 1px solid #efefef;
    background-color: white;

    padding: 10px 24px;
  }
}

然后在页脚元素中添加对话框按钮：

<button class="close" matDialogClose>
  <mat-icon>close</mat-icon>
</button>
<h1 mat-dialog-title>{{ modalTitle }}</h1>
<hr />
<mat-dialog-content> Dialog content </mat-dialog-content>
<footer class="sticky-modal-footer">
  <button color="primary">OK</button>
</footer>

有什么办法可以使对话框的页眉和页脚在棱角材料中保持粘性

1 个答案: