Show scrollbar when mat-dialog appears - Angular Material design

Question

I am using mat-dialog from Angular Material design. When the content is longer the container height, the content in the mat-dialog-content should be scroll.

The scrollbar appears when you scroll down but it disappears after a few seconds. How can I show the scrollbar when the dialog appears? so that users are indicated that there is more content below and they will have to scroll down.

Answer 1

You can do the following in your dialog component constructor to always show vertical scroll on dialog open.

DI Renderer2 to call the setSyle() method on the element

private ren:Renderer2

The CDK overlay is not part of the component and need to grab it from the document.

let el = document.getElementsByClassName('mat-dialog-container').item(0);

Use Renderer2 to call the setStyle() method

ren.setStyle(el, 'overflow-y', 'scroll')

Component

import {Component, Inject, Renderer2} from '@angular/core'; 

constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
    private ren:Renderer2
    ) {
      let el = document.getElementsByClassName('mat-dialog-container').item(0);
      ren.setStyle(el, 'overflow-y', 'scroll')
     }

Stackblitz

https://stackblitz.com/edit/angular-372fxl?embed=1&file=app/dialog-overview-example.ts