ASPxPopupControl.PopupVerticalAlign Property
Gets or sets a popup window’s vertical alignment.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.1.dll
NuGet Package: DevExpress.Web
Declaration
[DefaultValue(PopupVerticalAlign.NotSet)]
public PopupVerticalAlign PopupVerticalAlign { get; set; }Property Value
| Type | Default | Description |
|---|---|---|
| PopupVerticalAlign | NotSet | One of the PopupVerticalAlign enumeration values. |
Available values:
| Name | Description |
|---|---|
| NotSet | A popup element is displayed on the y-coordinate of the mouse cursor position.
|
| Above | A popup element is displayed above the corresponding HTML element so that the y-coordinate of the popup element’s bottom border is equal to the y-coordinate of the HTML element’s top border.
|
| TopSides | A popup element is displayed so that the y-coordinate of the popup element’s top border equals the y-coordinate of the corresponding HTML element’s top border.
|
| Middle | A popup element is displayed so that the y-coordinate of the popup element’s center equals the y-coordinate of the corresponding HTML element’s center.
|
| BottomSides | A popup element is displayed so that the y-coordinate of the popup element’s bottom border equals the y-coordinate of the corresponding HTML element’s bottom border.
|
| Below | A popup element is displayed below the corresponding HTML element so that the y-coordinate of the popup element’s top border equals the y-coordinate of the HTML element’s bottom border.
|
| WindowCenter | A popup element is displayed so that it is vertically aligned at the center of the browser’s window. |
Remarks
The default popup window (or all popup windows from the ASPxPopupControl.Windows collection) is aligned vertically on the y-coordinate of the mouse cursor position by default. Use the PopupVerticalAlign property to set the window alignment relative to the corresponding element specified by the ASPxPopupControl.PopupElementID (PopupWindow.PopupElementID) property, or to display the window at the center of the browser’s window.
Note
Use the HorizontalAlign and VerticalAlign properties to align a popup in adaptive mode.
Example
This example demonstrates the following capabilities of the ASPxPopupControl when its popup window is used in modal mode:
The ShowPageScrollbarWhenModal property allows the browser’s vertical scrollbar to be displayed providing users with a capability to scroll the document content while the modal popup window is being shown;
The AutoUpdatePosition property controls whether the popup window’s position should be automatically recalculated after performing some popup window resizing or document scrolling operations.
<dx:ASPxCheckBox ID="cbShowPageScrollbarWhenModal" runat="server" Text="ShowPageScrollbarWhenModal" />
<dx:ASPxCheckBox ID="cbAutoUpdatePosition" runat="server" Text="AutoUpdatePosition" />
<dx:ASPxButton ID="btnShow" runat="server" Text="Show" />
<dx:ASPxPopupControl ID="popup" runat="server" ShowOnPageLoad="true" PopupElementID="ASPxButton1"
Modal="True" ShowPageScrollbarWhenModal="False" PopupHorizontalAlign="WindowCenter"
PopupVerticalAlign="WindowCenter" HeaderText="Gladiator" AllowDragging="True"
AllowResize="True" EnableAnimation="False">
<ContentCollection>
<dx:PopupControlContentControl runat="server">
<span class="Gray"><b>Directed by:</b> Ridley Scott<br />
<b>Year:</b> 2000</span><br />
<br />
<div style="font-family: Tahoma; font-size: 10px; color: #666666;">
When a Roman general is betrayed and his family murdered by a corrupt prince, he
comes to Rome as a gladiator to seek revenge.</div>
</dx:PopupControlContentControl>
</ContentCollection>
<ClientSideEvents Init="function(s, e) { s.Show(); }" />
</dx:ASPxPopupControl>
protected void Page_Load(object sender, EventArgs e) {
if(IsPostBack) {
popup.ShowPageScrollbarWhenModal = cbShowPageScrollbarWhenModal.Checked;
popup.AutoUpdatePosition = cbAutoUpdatePosition.Checked;
}
}
Related GitHub Examples
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the PopupVerticalAlign property.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.