How to make only table content scrollable in a dialog? - Angular Material

Question

I have an Angular Material Dialog which contains Material Table. I would like to make the table content scrollable (not even the table header). By default, the dialog's content is scrollable which is not what I want. Please see the example here

Same question has answered here: https://stackoverflow.com/questions/51709280/angular-6-material-data-table-with-fixed-header-and-paginator — Yogendra Chauhan, Jul 29 '20 at 12:34
@YogendraChauhan I could make the content scrollable but it's a problem when I have the table in a dialog. — Akash, Jul 29 '20 at 12:35

score 2 · Accepted Answer · answered Jul 29 '20 at 12:41

2

It can be easily achieved by using flex:

Add dialog.component.scss file to styleUrls of your component with the following rules:

:host,
form  {
  display: flex;
  flex-direction: column;
  height: 100%;
}

form,
.table-body {
  flex: auto;
  overflow-y: auto;
}

Add sticky: true to your table header:

*matHeaderRowDef="displayedColumns; sticky: true"

Forked Stackblitz

answered Jul 29 '20 at 12:41

yurzui

205,937
32
433
399

Thanks @yurzui .. But it's problem if there are elements before the table which I don't want to scroll. – Akash Jul 29 '20 at 14:45
Please check the sample in the question again. Thanks for checking. – Akash Jul 29 '20 at 14:48
I updated my demo https://stackblitz.com/edit/angular-material-table-with-form-hah5kt?file=app%2Fdialog.component.scss – yurzui Jul 29 '20 at 14:51
Wish I could upvote your answer more than once. Thanks again. – Akash Jul 29 '20 at 15:40

score 0 · Answer 2 · answered Jul 29 '20 at 12:59

Here is the working example:

https://stackblitz.com/edit/angular-material-table-with-form-xuayxj

Just add this style on your table max-height: 200px;overflow:auto; & create mat header row sticky like this:

<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>

How to make only table content scrollable in a dialog? - Angular Material

2 Answers2