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

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

Continue reading...