DxPopupBase.Height Property

Specifies the Popup’s height.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string Height { get; set; }

Property Value

Type	Description
String	The Popup’s height in CSS units.

Remarks

The Popup’s width is equal to 500px on desktops. On phones and tablets, the width adapts to the viewport width. The Popup’s height changes to fit its content.

Use the Width and Height properties to specify the Popup size in CSS units.

Run Demo: Popup - Alignment and Size

Absolute Height

You can specify the Popup’s size in absolute units, such as pixels, inches, and so on.

<div @onclick="@(() => PopupVisible = true)">
    <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="Header"
         BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel
             nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor,
             imperdiet mauris. Fusce id purus magna."
         Width="400px"
         Height="200px" />

@code {
    bool PopupVisible { get; set; } = false;
}

If you set this property to a floating-point value, the Popup uses the AwayFromZero operation to convert this value to the integer number that is treated as a value in pixels.

The Popup’s content is displayed over the window’s boundaries when the popup exceeds the window’s size. Set the Scrollable property to true to show scrollbars and display all content inside the window’s boundaries.

Relative Height

You can define the Popup’s size in relative units. The following snippet sets the height to 20% of the screen height:

<div @onclick="@(() => PopupVisible = true)">
    <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="Header"
         BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel
             nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor,
             imperdiet mauris. Fusce id purus magna."
         Height="20%" />

@code {
    bool PopupVisible { get; set; } = false;
}

The Popup’s content is displayed over the window’s boundaries when the popup exceeds the window’s size. Set the Scrollable property to true to show scrollbars and display all content inside the window’s boundaries.

Height Constraints

Use the MinHeight and MaxHeight properties to limit the Popup’s height when it automatically adapts to fit content.

<div @onclick="@(() => PopupVisible = true)">
    <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="Header"
         BodyText="@DynamicText"
         MinHeight="200px"
         MaxHeight="600px" />

@code {
    bool PopupVisible { get; set; } = false;
    string DynamicText { get; set; } // Get text from an external source.
}