All Components

Aligning and Positioning

The Popup enables you to align it to components and absolute points as well as to control its position and render a margin.

Aligning to Components

To align the Popup to a specific component, use the anchor property binding. The Popup opens next to the defined anchor component.

If an anchor is not provided, the Popup will use the offset property value.

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

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

  .example {
      display: flex;
      margin: auto 30px;
  }

  .example-content {
      margin: 200px auto;
  }
</style>
@Component({
  selector: 'my-app',
  template: `
    <div class="example">
        <div class="example-content">
          <span class="anchor content" #anchor>ANCHOR</span>
          <kendo-popup [anchor]="anchor" [popupClass]="'content'">
            Popup content.
          </kendo-popup>
        </div>
    </div>
  `
})
class AppComponent { }

Aligning to Absolute Points

To align the Popup to a specific absolute point that is relative to the document, use the offset property binding. The Popup opens next to the point and uses the specified popupAlign configuration.

<style>
  .content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>
@Component({
  selector: 'my-app',
  template: `
      <kendo-popup [popupClass]="'content'" [offset]="offset">
        Popup content.
      </kendo-popup>
  `
})
class AppComponent {
    /* Change left or top value to reposition the popup */
    public offset: offset = { left: 100, top: 100 };
}

Adding a Margin

The Popup adds the margin value to the popup dimensions in pixels and leaves a blank space between the popup and the anchor.

@Component({
  selector: 'my-app',
  template: `
      <button #anchor style="position: absolute; top: 150px; left: 100px">Anchor</button>
      <kendo-popup [anchor]="anchor" [margin]="margin">
        Popup content.
      </kendo-popup>
  `
})
class AppComponent {
    /* Change horizontal or vertical value to reposition the popup */
    public margin = { horizontal: -25, vertical: 30 };
}

Positioning

Both the anchor and the Popup are treated as rectangular elements and, as a result, each has nine pivot points. You can align every point of the Popup to an anchor point. The component will position itself by aligning its top-right point to the bottom-right point of the anchor.

@Component({
  selector: 'my-app',
  template: `
    <style>
      .content {
        padding: 30px;
        color: #fff;
        background-color: #999;
        border: 1px solid rgba(0,0,0,.05);
      }

      .content p {
        margin: 0;
      }

      .anchor {
        display: block;
        width: 120px;
        margin: 200px auto;
      }
    </style>


    <div class="example-config row">
      <div class="col-sm-4 col-xs-12">
        <h4>Anchor align point</h4>
        <p>
        Horizontal <br />
        <select #anchorHorizontal [(ngModel)]="anchorAlign.horizontal" class="k-textbox">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
        </select>
        </p>
        <p>
        Vertical <br />
        <select #anchorVertical [(ngModel)]="anchorAlign.vertical" class="k-textbox">
            <option value="top">Top</option>
            <option value="middle">Middle</option>
            <option value="bottom">Bottom</option>
        </select>
        </p>
      </div>
      <div class="col-sm-4 col-xs-12">
        <h4>Popup align point</h4>
        <p>
        Horizontal <br />
        <select #popupHorizontal [(ngModel)]="popupAlign.horizontal" class="k-textbox">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
        </select>
        </p>
        <p>
        Vertical <br />
        <select #popupVertical [(ngModel)]="popupAlign.vertical" class="k-textbox">
            <option value="top">Top</option>
            <option value="middle">Middle</option>
            <option value="bottom">Bottom</option>
        </select>
        </p>
      </div>
      <div class="col-sm-4 col-xs-12">
        <h4>Popup action</h4>
        <br />
        <button (click)="onClick()" class="k-button k-primary">{{show ? 'Close Popup' : 'Open Popup'}}</button>
      </div>
    </div>

    <span #anchor class="anchor content">ANCHOR</span>
    <kendo-popup [anchor]="anchor" [anchorAlign]="anchorAlign" [popupAlign]="popupAlign" *ngIf="show">
        <div class="content">
            <p>Popup content.</p>
        </div>
    </kendo-popup>
  `
})
class AppComponent {
    private anchorAlign: Align = { horizontal: "right", vertical: "bottom" };
    private popupAlign: Align = { horizontal: "right", vertical: "top" };
    private show: boolean = false;

    private onClick(): void {
        this.show = !this.show;
    }
}
In this article