Opening Angular Material dialog makes the parent display fade?

Question

I am implementing Angular Material Dialog in my project. It is working, however, when I open the dialog, my other screen(parent component calling the dialog) disappears in the background. See the image, the background does not shows the content of the page.

I want to implement it like its shown in the angular material website, where background is visible. (See Image)

I don't understand the issue, as I have implemented it as described in the website.

Any error in console ? Can you show your code ? If you did like Material, then it shoud work like this — Emilien
@Emilien No there is no Error in Console. Yes, I did used it as suggested in the example on website as well as stackblitz — sahil kharya

Bozhinovski Bozhinovski · Accepted Answer · 2020-10-13T14:17:21

Try adding noopscrollstrategy to the dialog reference:

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { some data },
        scrollStrategy: new NoopScrollStrategy() // add this line
    });

and dont forget to import it

import { NoopScrollStrategy } from '@angular/cdk/overlay';

If that doesn't work try adding css:

.cdk-global-scrollblock{
    position: static !important;
    width: initial !important;
    overflow-y: inherit !important;
  }

If you want to understand what NoopScrollStrategy is doing behind the scene read the documentation: https://material.angular.io/cdk/overlay/api

Happy coding

Opening Angular Material dialog makes the parent display fade?

1 Answers