Angular material dialog component hides all my web

Question

I'm using angular 5 and angular material (latest version) and I'm trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is put in blank background like if the dialog were overlaping it contents and hiding it all.

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
    moduleId: module.id,
    selector: 'app-dialog',
    templateUrl: 'dialog.component.html',
    styleUrls: ['dialog.component.scss']
})
export class DialogComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef<DialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) { }

    onNoClick(): void {
        this.dialogRef.close();
    }

    ngOnInit() {
    }

}

And this is the method that opens the Dialog.

onSubmit() {

        const dialogRef = this.dialog.open(DialogComponent, {
            width: '250px',
            data: { name: 'Juan Manuel', animal: 'Perro' }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed');
            console.log(result);
        });
    }

UPDATE: I've seen that after the dialog is rendered a class is added to my html tag. .cdk-global-scrollblock I don't know why is that class added to my html tag.

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

That what's causing my error. Does someone knows why is that class on my html tag?

Answer 1

I get with the same problem.İt looked like that in my css runtime.

https://www.resimag.com/p1/ff8da3c59ae.jpeg

enter image description here

For this, my solution was; I import the ViewEncapsulation object in my component.You can learn how it is used and what it does. https://dzone.com/articles/what-is-viewencapsulation-in-angular https://angular.io/api/core/ViewEncapsulation

After In css I wrote this code; "position: initial; width: initial; overflow: hidden;"

"position: initial; width:initial;" turn back the value that it received first.

This is my dialog.component.css;

.cdk-global-scrollblock {
  position: initial;
  width: initial;
  overflow: hidden;
}

This is my dialog.component.ts;

import {Component, OnInit,Inject, ViewEncapsulation} from '@angular/core';
import {  MatDialogRef,  MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-dialog',
  encapsulation: ViewEncapsulation.None,
  templateUrl: 'dialog.component.html',
  styleUrls: ['dialog.component.css']
})
export class DialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef < DialogComponent > ,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  ngOnInit() {}

}

Answer 2

I faced same problem. Following solution work for me,

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

Put it into your global css or in dialog components loacl css (you have to enable view encapsulation in case of local)

Answer 3

Just add this override css or scss class to fix the background invisible issue.

.cdk-global-scrollblock{
    position: initial;
}

Answer 4

See the API Docs for MatDialogConfig. You can set hasBackdrop to false.

    const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { name: 'Juan Manuel', animal: 'Perro' },
        hasBackdrop: false
    });

Answer 5

Easiest fix would be setting the dialog scroll strategy to new NoopScrollStrategy object:

const dialogRef = this.dialog.open(DialogComponent, {
        width: '250px',
        data: { name: 'Juan Manuel', animal: 'Perro' },
        scrollStrategy: new NoopScrollStrategy()
    });

this will only require an extra import:

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

Answer 6

This is due to cdk-global-scrollblock that is injected into the HTML body which will affect your components that have position absolute.

You can override it in the Angular Material theme CSS with:

.cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}

or with deprecated Shadow-Piercing:

/deep/ .cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}