All Components

Viewport Boundary Detection

The Popup enables you to set its boundary detection functionality by using the collision binding property.

The property specifies the behavior of the Popup when it does not fit in the viewport. By default, the Popup fits horizontally and flips vertically.

@Component({
  selector: 'my-app',
  template: `
    <div class="example" [style.top.px]="exampleTop">
      <div [style.position]="'relative'">
          <span #anchor class="anchor content" (click)="onToggle()">ANCHOR</span>
          <kendo-popup *ngIf="show" [anchor]="anchor" [collision]="collision">
            <div class="content">
              Popup content.
            </div>
          </kendo-popup>
      </div>
    </div>
  `,
  styles: [`
    .content {
      padding: 30px;
      color: #787878;
      background-color: #fcf7f8;
      border: 1px solid rgba(0,0,0,.05);
    }
    .anchor {
      width: 80px;
      height: 40px;
      cursor: pointer;
      position: relative;
    }
    .example {
      position: absolute;
    }
  `]
})
class AppComponent {
    private collision: Collision = { horizontal: 'flip', vertical: 'fit' };

    /* Move the 'example' to the bottom to see the collision behavior */
    private exampleTop: number = 400;

    private toggleText: string = "Show";
    private show: boolean = false;
    public onToggle(): void {
        this.show = !this.show;
    }

}
In this article