DxSplitterPane.Size Property

Specifies the size of the pane.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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 width of vertical panes and the height of horizontal panes.

When the AllowResize property is set to true, users can resize the pane. Use the MinSize and MaxSize properties to restrict changes to the pane.

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

Handle the SizeChanged event to react to pane size changes.

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

Run Demo