DxPopupBase.Width Property

Specifies the Popup’s width.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.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.

Run Demo: Popup - Alignment and Size

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