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: stackoverflow.com/questions/51709280/… — Yogendra Chauhan
– Yogendra Chauhan, Commented Jul 29, 2020 at 12:34
@YogendraChauhan I could make the content scrollable but it's a problem when I have the table in a dialog. — Akash
– Akash, Commented Jul 29, 2020 at 12:35

yurzui · Accepted Answer · 2020-07-29 12:41:38Z

3

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, 2020 at 12:41

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Akash Over a year ago

Thanks @yurzui .. But it's problem if there are elements before the table which I don't want to scroll.

Akash Over a year ago

Please check the sample in the question again. Thanks for checking.

yurzui Over a year ago

I updated my demo stackblitz.com/edit/…

Akash Over a year ago

Wish I could upvote your answer more than once. Thanks again.

Yogendra Chauhan · Accepted Answer · 2020-07-29 12:59:02Z

0

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>

answered Jul 29, 2020 at 12:59

Yogendra Chauhan

8255 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related