Popup Position and Collision
This article outlines how to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space.
Position
You can customize how the popup and its anchor align with each other. You can use the available parameters to control the position of the component.
Anchor Alignment
Use the available parameters to control which part of the anchor touches the Popup.
| Parameter | Type | Enum Members |
|---|---|---|
AnchorHorizontalAlign | PopupAnchorHorizontalAlign | Center Left (default value) Right |
AnchorVerticalAlign | PopupAnchorVerticalAlign | Bottom (default value) Center Top |
See the example below to customize the available parameters and see how they affect the Popup component.
Popup Alignment
Use the available parameters to control which side of the Popup is in contact with the anchor.
| Parameter | Type | Enum Members |
|---|---|---|
HorizontalAlign | PopupHorizontalAlign | Center Left (default value) Right |
VerticalAlign | PopupVerticalAlign | Bottom Center Top (default value) |
Collision
There are two collision modes available for the Popup component:
Fit—The Popup will shift until it is fully visible on the screen.Flip—The Popup will render on the other side of the anchor.
Use the available parameters to control how the Popup reacts to insufficient screen space.
| Parameter | Type | Enum Members |
|---|---|---|
HorizontalCollision | PopupCollision | Fit (default value) Flip |
VerticalCollision | PopupCollision | Fit Flip (default value) |
See the example below to customize the available parameters and see how they affect the Popup component.
Example
The following example lets you experiment with the available settings that control the position and collision behavior of the Popup. It starts with the default component behavior.