Vertical Split Pane

Last update: Edit

The vertical split pane is deprecated in version 5.18.0 in favor of the more powerful Scroll Container.

A vertical split pane creates a region that is split in two by a vertical divider. In the client the divider can be dragged up and down by the end user.

Common Properties


The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class ‘mx-name-{NAME}’, which can be useful for Selenium testing.


The class property allows you to specify a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. You can use more than one class, separated by a space. The classes should be classes from the theme that is used in the project. Using the class property overrules the default styling of the widget.

Note that the styling is applied in the following order:

1. Default styling defined by the theme the project uses.
2. The 'Class' property of the widget.
3. The 'Style' property of the widget.


The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

background-color:blue; This will result in a blue background

General Properties

Splitter position

This property determines the initial position of the dividing line in percentages. The default value of 50 will place the line exactly halfway the split pane.

Default value: 50

Animated resize

This property indicates whether re-sizing, by dragging the divider, is visualized in real time.

Default value: False


The height property determines the height of the split pane. A height of 0 will set the pane’s height to the default defined in the theme.

Default value: 0