CODEWITHSUNDEEP
angularscrolldialogangular-material2
Nitin Shekhar
Nitin Shekhar

Reputation: 175

enable main page scroll when angular material dialog open

I have a requirement where I will have my material dialog and when I am opening it I will not have a vertical scrollbar on dialog, instead I will just use the main page (on which page dialog is opened) scroll, For now what happening is, its blocking any scroll movement on the main page.

check the stackblitz link

so if you see in above stackblitz dialog has lot of content which is not visible because I am not able to scroll down using main page scroll. Its blocking the main page scroll and note I don't want the scroll inside the dialog itself. that is not my requirement unfortunately

Upvotes: 1

Views: 1440

Answers (1)

Asterios Kalogeras
Asterios Kalogeras

Reputation: 134

You should add a scroll strategy as an option when the dialog opens. I changed your openDialog() function as follows, to include a scroll strategy.

export class DialogContentExample {
  constructor( public dialog: MatDialog, private overlay: Overlay ) {}

  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog, {
      scrollStrategy: this.overlay.scrollStrategies.noop()
    }); //Added the strategy, after first constructing the variable containing it

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

You also need to import the library: import { Overlay } from "@angular/cdk/overlay";

Here is your refactored stackblitz example.

Upvotes: 2

Related Questions