DxPopupBase.Width Property
Specifies the Popup’s width.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public string Width { get; set; }
#Property Value
Type | Description |
---|---|
String | The Popup’s width 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.
Use the Width
and Height properties to specify the Popup size in CSS units.
#Absolute Width
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 Width
You can define the Popup’s size in relative units. The following snippet sets the width to 50% of the screen width:
<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="50%"/>
@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.
#Auto Width
Set the width to auto
to make it fit the Popup content. You can use the MinWidth and MaxWidth properties to define size constraints.
<div @onclick="@(() => PopupVisible = true)">
<p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>
<DxPopup @bind-Visible="@PopupVisible"
HeaderText="Header"
BodyText="@DynamicText"
Width="auto"
MinWidth="300px"
MaxWidth="600px" />
@code {
bool PopupVisible { get; set; } = false;
string DynamicText { get; set; } // Get text from an external source.
}