DxPopupBase.Height Property
Specifies the Popup’s height.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.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.
#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.
}