DxSplitterPane.Size Property

Specifies the size of the pane.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
String	The size, in CSS units.

Remarks

Use the Size property to specify the initial width of vertical panes and height of horizontal panes.

<DxSplitter CssClass="border"  Width="100%" Height="600px">
    <Panes>
        <DxSplitterPane Size="30%" MinSize="100px">@PaneContent1</DxSplitterPane>
        <DxSplitterPane Size="50%" MaxSize="70%">@PaneContent2</DxSplitterPane>
        <DxSplitterPane>@PaneContent3</DxSplitterPane>
    </Panes>
</DxSplitter>

Run Demo

Note that the size of at least one panel should remain undefined. Otherwise, the Splitter component ignores the size of the last pane.

When the AllowResize property is set to true, users can resize the pane. Use the MinSize and MaxSize properties to set the pane’s width or height. Handle the SizeChanged event to react to pane size changes.

Splitter Size Calculation

In a horizontal Splitter, panes without the Size property automatically expand to occupy the available width equally.

In a vertical Splitter, the distribution of pane heights depends on the splitter’s total height and the Size properties of individual panes:

• If the splitter’s total height is defined, panes without the Size property automatically expand to occupy the available height equally.
• If the splitter’s total height is not defined, panes without the Size property expand or shrink depending on their content.