Page is Scrollable while Dialog is Opened

Environment

Product

Progress® Kendo UI® for Angular Dialog

Description

How can I disable page scrolling when opening the Dialog?

Solution

You can add the .k-overflow-hidden built-in CSS class to the body element when opening the Dialog. Use addClass method of Angular Renderer2 class:

ts

  constructor(public renderer: Renderer2){}

  public onOpen() {
    this.opened = true;
    this.renderer.addClass(document.body, 'k-overflow-hidden');
  }

Remove the class when closing the Dialog, using removeClass method:

ts

  public onClose(status) {
    this.opened = false;
    this.renderer.removeClass(document.body, 'k-overflow-hidden');
  }