Angular Material Dialog Component Scrolling Issue at Startup

1
votes

I am using Angular Material Dialog component within my app and within this dialog, I am presenting the a user a HTML table of data, that may have a scrollbar.

My issue is though, when I click the button to open the actual dialog, I noticed that the contents are immediately scrolled to the bottom, which is a nuisance, since I need to manually scroll back to the top.

I am using the standard setup as described here:

https://material.angular.io/components/dialog/overview

My dialog call is as follows:

myDialog(a: string, b: string) {
        let dialogRef = this.dialog.open(MyDialogComponent, {
            height: '500px',
            width: '800px',
            data: { a,b }
        });
}

What can I do to avoid this scroll to the bottom issue? I have tried some CSS such as top: 0; position: fixed; but to no avail.

2
cssangularangular-materialangular-material-5
this issue does not seem to relate with your dialog, it is with your component you using. can you show MyDialogComponent's HTML & CSS - WasiF
@WasiF interesteing. is there anything in particular I should be looking for? - tonyf
may be your component's css or styles' css effecting. Please show your code - WasiF
may be you set scrollTop property somewhere in your html or css. Provide stackblitz - WasiF
No scrollTop and completely removed my component CSS. Still have the same issue. - tonyf

2 Answers

3
votes

The reason it happans to you is that, the dialog component auto-focuses on the first input / button in your HTML content. You should add 'autoFocus: false' to the Dialog options to prevent it.

myDialog(a: string, b: string) {
    let dialogRef = this.dialog.open(MyDialogComponent, {
        height: '500px',
        width: '800px',
        autoFocus: false,
        data: { a,b }
    });
}
0
votes

Solved my issue by moving the following HTML code to the top of the page.

<mat-dialog-actions>
    <br>
    <button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
        Close
    </button>
</mat-dialog-actions>