Angular mat-dialog-title and mat-dialog-actions not sticking

Question

I am not sure what I am doing wrong here, but my dialog does not seem to be utilizing my sections. This is how I am laying out the dialog:

Stackblitz Example

<ng-container ngProjectAs="[mat-dialog-title]">
  <app-dialog-header header="Command Line Arguments"></app-dialog-header>
</ng-container>

<div mat-dialog-content fxLayout="column" fxLayoutGap="5px">
  <textarea rows="15" class="primary-background"></textarea>
</div>

<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
  <button mat-button>Cancel</button>
  <button mat-button color="accent">Save</button>
</div>

This is how it looks when I am at the top of the dialog.

This is how it looks when I scroll to the bottom of the dialog.

According to the documentation when using [mat-dialog-title] the title should stick to the top, and when using [mat-dialog-actions] the actions should stick to the bottom of the dialog. As seen in the screen shots, that is not happening.

This is how I am opening the modal:

  showCmdArgsDialog() {
    this.dialog.open(CmdArgsDialogComponent, {
      width: '75vw',
      height: '80vh',
      panelClass: 'cmd-args-dialog'
    })
  }

Could you provide StackBlitz repro? – Ruslan Lekhman Oct 22 '21 at 19:15 — Ruslan Lekhman, Oct 22 '21 at 19:15
@RuslanLekhman I have added a link to the StackBlitz – Get Off My Lawn Oct 22 '21 at 19:47 — Get Off My Lawn, Oct 22 '21 at 19:47

score 1 · Answer 1 · answered Oct 22 '21 at 20:05

1

It is not sticky because of dialog options:

{
  width: '75vw',
  height: '400px',
}

But it still has some issues with FlexLayoutModule and app-dialog-header component. It works fine with native mat-dialog-title. See StackBlitz.

answered Oct 22 '21 at 20:05

Ruslan Lekhman

696
5
9

So, to fix this issue, I removed the `height` and moved the flex layout stuff within the `content` and `title` components. That fixed the issue. – Get Off My Lawn Oct 22 '21 at 20:23
You can see my changes in the StackBlitz I provided. – Get Off My Lawn Oct 22 '21 at 20:25

score 0 · Answer 2 · answered Oct 22 '21 at 20:14

I suspect the issue might be coming how angular components are compiled

If you notice in browser elements window (screenshot below) you can see that mat-dialog-title is shown under app-dialog-header element, however, it should be the other way around. As other answer mentions that with native mat-dialog-title this works fine.

Angular mat-dialog-title and mat-dialog-actions not sticking

2 Answers2