Angular CDK Dialog is not rendering as a static/Fixed/Absolute layout

Question

Using Angular CDK 14.2.1 when using the Dialog module from @angular/cdk/dialog the dialog opens but not as a native modal on top of the UI, instead this shows up following html flow, so it renders downstream the rest of components.

Angular version is 14.0.0

This is the TS

constructor(private dialog: Dialog) { }

  opendialog() {
    this.dialog.open(DialogComponent, { width: '100%', height: '100%', panelClass: 'dialog' });
  }

and this the HTML:

<button (click)="opendialog()">open dialog</button>

Neither CDK nor Angular Material are rendering it properly.

To be more precise, this is the desired behaviour: https://material.angular.io/cdk/dialog/examples

And this is the behaviour I have

Thanks so much

Answer 1

I'm also experiencing the same problem and figured that this has something to do with the overlay css that comes with the dialog module. My hunch why online examples work is because they already installed Material Theme in their project and all overlay css are included in it.

The solution is try importing the pre-built overlay css as indicated in the overlay CDK Documentation.

Reference: https://material.angular.io/cdk/overlay/overview

In my Angular case, I imported it in styles.scss and it now works. cheers!

@import '@angular/cdk/overlay-prebuilt.css';