New to Kendo UI for Angular? Start a free 30-day trial

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: