Pane Resizing
- 2 minutes to read
By default, Pane resizing is available within a Splitter. An end-user can resize a pane by dragging its adjacent separator.
Availability of the Page Resizing Feature
You can enable/disable resizing of all panes within a Splitter by using the SplitterSettings.AllowResize property. For an individual pane, this setting can be overridden with the help of the SplitterPane.AllowResize (via MVCxSplitterPane.AllowResize) property.
Resizing Mode
Use the SplitterSettings.ResizingMode property to control how panes visually respond to resizing operations.
By default, this property is set to ResizingMode.Postponed, and dragging a separator to change the sizes of adjacent panes doesn’t redraw the panes until the resize operation is completed. In this case, a specific resize pointer denotes the dragged separator to indicate its position.
Set the SplitterSettings.ResizingMode property to ResizingMode.Live to redraw the related panes dynamically during the resizing operation.
You can refer to our online demo Splitter - Resizing to learn more.
Min/Max Pane Size
If pane resizing is enabled, you can restrict end-user resizing by defining maximum and minimum limits to which the size of individual panes can be changed. For this purpose use a pane’s SplitterPane.MinSize (via MVCxSplitterPane.MinSize) and SplitterPane.MaxSize (via MVCxSplitterPane.MaxSize) properties. You can also specify the minimum size for all panes within a Splitter by using the SplitterSettings.PaneMinSize property.
Note that these properties specify the height for the panes that are stacked vertically within their container (a parent pane of a splitter) and the width - for horizontally stacked panes.
Fullscreen Mode
To enable a full-screen mode for a Splitter, set the SplitterSettings.FullscreenMode property to true. In this case, a Splitter fills the entire page and can be resized together with the browser window.
See the Splitter - Fullscreen Mode online demo to learn more.