Показывать полосу прокрутки при появлении диалогового окна - Дизайн углового материала

Question

Я использую мат-диалог из дизайна Angular Material.Когда содержимое превышает высоту контейнера, содержимое в mat-dialog-content должно прокручиваться.

Полоса прокрутки появляется при прокрутке вниз, но исчезает через несколько секунд.Как я могу показать полосу прокрутки, когда появляется диалоговое окно?так что пользователям указано, что ниже есть больше контента, и им придется прокрутить вниз.

Answer 1

Вы можете сделать следующее в вашем диалоговом компоненте constructor, чтобы всегда показывать вертикальную прокрутку в открытом диалоговом окне.

DI Renderer2 для вызова метода setSyle() для элемента

private ren:Renderer2

Наложение CDK не является частью компонента, и его необходимо извлечь из документа.

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

Используйте Renderer2 для вызова setStyle() метода

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

Компонент

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