CODEWITHSUNDEEP
angular6angular-material-6
LeO
LeO

Reputation: 5238

How to prevent scrolling down in Angular material dialog?

I retrieve data via http requests and the text is pre-formated as HTML text and most of the time quite long. Essentially I use the following content:

<h2 matDialogTitle> My title</h2>
<mat-dialog-content>
  <p [innerHTML]="data.displayText" ></p>
</mat-dialog-content>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close color="primary">Close</button>
</div>

The content of the dialog is always scrolled down - close to the very ending. How to prevent this feature and display the content from the very beginning?

Upvotes: 6

Views: 6650

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

By default, a MatDialog will set focus to the first focusable component in the dialog, which ends up being your button below your content. You can disable this feature when you launch the dialog through the dialog config:

dialog.open(MyDialogComponent, {
    autoFocus: false
});

Upvotes: 15

Related Questions