CODEWITHSUNDEEP
angularangular-material2angular7
Thorsten Rintelen
Thorsten Rintelen

Reputation: 568

Angular7, Material2, page scroll to top on open dialog

I have a button which opens my material dialog. On open dialog, the page in the background scrolls to top. On closing the dialog, the page scrolls back to the original position.

Who can i stop this scrolling?

const dialogRef = this.dialog.open(dialogComponent, {
            panelClass: config.panelClass,
            width: 1100px,
            height: 800px,
            closeOnNavigation: true,
            maxHeight: '95%',
            maxWidth: '95%',
            data: {
                someData...
            },
        });

My html

<div class="dialog dialog__content">
    <div>
        <div *ngIf="title" class="dialog__header">
            <h1 mat-dialog-title>{{title | translate}}</h1>
        </div>
        <div class="dialog__closing">
            <button matDialogClose>
                <i class="fal fa-times-circle"></i>
            </button>
        </div>
    </div>
    <mat-dialog-content>
        ...some content...
    </mat-dialog-content>

    <mat-dialog-actions *ngIf="buttons && buttons.length > 0">
        <div class="buttons">
            <button>...</button>
        </div>
    </mat-dialog-actions>
</div>

Upvotes: 3

Views: 3095

Answers (1)

Thorsten Rintelen
Thorsten Rintelen

Reputation: 568

I found the solution here: https://github.com/angular/material2/issues/7390

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

Upvotes: 7

Related Questions