-1

I have a mat-dialog which contains a mat-stepper. Inside this stepper, I have a step which contains a form. In this form I have multiple elements (list, mat-card and table) which I want to always fill the height of the dialog. Basically, I want the height of the table and also the height of the list on the left side of the table to adjust to the dialog height. The mat-card, which is shown when selecting an item in the list, should always be at the bottom left of the dialog and the list above it should either show all elements (if possible) or display a scroll bar if there is not enough space left to show all elements. The table should also either show all elements if there is enough space or display a scroll bar if there isn't enough space. I do not want any of the elements in this dialog to cause an overflow which would require me to scroll in the actual dialog.

A colleague attempted to solve this by using max-height: calc(90vh - <x>px) before but this really does not work very well at all. How can I do this properly?

Here is a stackblitz which shows the problem: Stackblitz

Hopefully, my question is clear. If not, please let me know and I will try my best to explain it in more detail.

Chris
  • 1,417
  • 4
  • 21
  • 53

1 Answers1

1

Your problem is quite simple, the content of the dialog does not fit the height of your dialog.

Every child of the dialog mat-dialog-content, mat-stepper etc, should be maximizing their height (either with height:100% or flex:1 in a flex container).

Here is a quick example of this.

Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134
  • Thanks, but how exactly can I make this work? When I set every child to `height:100%`, it doesn't seem to make any difference and (in my case) the list on the left side still exceeds the bottom of the dialog when it contains too many items. I must be missing something, but I have no clue what that is. – Chris Feb 16 '22 at 14:16
  • I've now checked the CSS properties of every single child from the dialog itself to the individual elements (list, mat-card, table) and it is exactly like in your example but I still get a scroll bar in my dialog and the controls exceed the bottom of the dialog. Any idea, why? – Chris Feb 16 '22 at 14:42
  • So far I still wasn't able to solve this issue. What works fine in the stackblitz doesn't work at all in my actual project. The HTML and CSS code is basically identical but it just does not behave the same. I don't know what's so special about my project but following your advice did not solve the problem. I've even compared every single CSS attribute of the dialog, dialog content, stepper and everything inside it one by one between my project and the stackblitz and there is no difference anywhere to be found! – Chris Mar 04 '22 at 08:02