Angular material dialog component hides all my website components

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

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() {}

}