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.

<style>
  .content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }

  .anchor {
    width: 80px;
    height: 40px;
    position: relative;
  }

  .example {
      position: absolute;
  }
</style>
@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" [popupClass]="'content popup'">
            Popup content.
          </kendo-popup>
      </div>
    </div>
  `
})
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