Components / Popup

Support for Document Scale

Declare the document scale to get a correct Popup position.

To change the document scale, use a scale transform and inject the set value using a SCALE token.

The non-standard zoom property is not supported. It's behavior is not specified and differs between browsers.

import { Component, ElementRef, HostListener, ViewChild, ViewEncapsulation } from '@angular/core';

import { SCALE } from '@progress/kendo-angular-popup';

@Component({
  selector: 'my-app',
  encapsulation: ViewEncapsulation.None,
  providers: [{ provide: SCALE, useValue: 1.5 }],
  styles: [`
      html {
        transform: scale(1.5);
        transform-origin: 0 0;

        /* Set the width to (100 / scale)% to fill the available space */
        width: 66%;
      }

      .content {
        padding: 30px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
      }
  `],
  template: `
      <button #anchor (click)="toggle()" class="k-button">{{toggleText}} Popup</button>
      <kendo-popup #popup [anchor]="anchor" popupClass="content" *ngIf="show">
        Popup content.
      </kendo-popup>
  `
})
export class AppComponent {
    private toggleText = 'Hide';
    private show = true;

    public toggle(show?: boolean): void {
        this.show = show !== undefined ? show : !this.show;
        this.toggleText = this.show ? 'Hide' : 'Show';
    }
}


import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { PopupModule } from '@progress/kendo-angular-popup';

import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      PopupModule,
      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article