Covering the browser's scrollbar when the Window is maximized

Environment

Product

Progress® Kendo UI® for Angular Window

Description

How can I maximize the Kendo UI for Angular Window so that it covers the browser's scrollbar?

Solution

By default, when the Window component is maximized, the browser's scrollbar remains visible. This behavior could be overridden by modifying the document's body and applying some custom logic to the component.

The implementation consists of the following steps:

1. Configure the Window component.

   html

   <kendo-window #window [width]="width" 
   [minHeight]="400" title="Shopping List" *ngIf="opened" 
   (close)="openClose(false)" (stateChange)="stateChangeHandler($event)">

2. Get the browser's scrollbar width.

   ts

   constructor(private renderer: Renderer2) {
       this.getScrollbarWidth();
   }
   
   public getScrollbarWidth(): void {
       let width = 0;
   
       if (typeof document !== 'undefined') {
           let div = document.createElement("div");
   
           div.style.overflow = "scroll";
           document.body.appendChild(div);
   
           width = div.offsetWidth - div.scrollWidth;
   
           document.body.removeChild(div);
       }
   
       this.scrollbarWidth = width;
   }

3. Handle the stateChange event of the component and toggle the CSS overflow property of the body element.

   ts

   public stateChangeHandler(state: WindowState): void {
       if (state === "maximized") {
           this.renderer.setStyle(document.body, 'overflow', 'hidden'); //hide the browser's scrollbar each time the Window is maximized
           this.previousWidth = this.width;
           this.width = this.window.width + this.scrollbarWidth;
       } else {
           this.removeOverflowStyle(); //remove the applied style when the Window is in its default or minimized state
       }
   }
   
   public removeOverflowStyle(): void {
       if (document.body.style.overflow) {
           this.renderer.removeStyle(document.body, 'overflow');
           this.width = this.previousWidth;
       }
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Window
• API Reference of the WindowService