Back to Devexpress

ASPxPopupControl.PopupVerticalAlign Property

aspnet-devexpress-dot-web-dot-aspxpopupcontrol-3d8a1649.md

latest8.0 KB
Original Source

ASPxPopupControl.PopupVerticalAlign Property

Gets or sets a popup window’s vertical alignment.

Namespace : DevExpress.Web

Assembly : DevExpress.Web.v25.2.dll

NuGet Package : DevExpress.Web

Declaration

csharp
[DefaultValue(PopupVerticalAlign.NotSet)]
public PopupVerticalAlign PopupVerticalAlign { get; set; }
vb
<DefaultValue(PopupVerticalAlign.NotSet)>
Public Property PopupVerticalAlign As PopupVerticalAlign

Property Value

TypeDefaultDescription
PopupVerticalAlignNotSet

One of the PopupVerticalAlign enumeration values.

|

Available values:

NameDescription
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.

  • Default.aspx

aspx
<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

                <b>Year:</b> 2000</span>

            

            <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>
csharp
protected void Page_Load(object sender, EventArgs e) {
    if(IsPostBack) {
        popup.ShowPageScrollbarWhenModal = cbShowPageScrollbarWhenModal.Checked;
        popup.AutoUpdatePosition = cbAutoUpdatePosition.Checked;
    }
}
vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If IsPostBack Then
        popup.ShowPageScrollbarWhenModal = cbShowPageScrollbarWhenModal.Checked
        popup.AutoUpdatePosition = cbAutoUpdatePosition.Checked
    End If
End Sub

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.

asp-net-web-forms-grid-delete-confirm-dialog-with-dont-ask-me-again-option/CS/Solution/Default.aspx.cs#L27

csharp
ASPxPopupControl1.PopupHorizontalAlign = DevExpress.Web.PopupHorizontalAlign.Center;
    ASPxPopupControl1.PopupVerticalAlign = DevExpress.Web.PopupVerticalAlign.Middle;
}

asp-net-web-forms-grid-delete-confirm-dialog-with-dont-ask-me-again-option/VB/Solution/Default.aspx.vb#L28

vb
ASPxPopupControl1.PopupHorizontalAlign = DevExpress.Web.PopupHorizontalAlign.Center
    ASPxPopupControl1.PopupVerticalAlign = DevExpress.Web.PopupVerticalAlign.Middle
End Sub

See Also

PopupVerticalOffset

PopupHorizontalAlign

ASPxPopupControl Class

ASPxPopupControl Members

DevExpress.Web Namespace