Example of Default Functionalities in ASP.NET MVC Splitter Control

This example demonstrates the default functionalities of the Splitter control. To resize panes and increase the dimension of a pane, drag a separator (divider) bar.

DEMO

SOURCE

Horizontal Splitter

Left pane

size: 25%

min: 60px

Middle pane

size: 50%

min: 60px

Right pane

size: 25%

min: 60px

Vertical Splitter

Top pane

size: 30%

min: 60px

Middle pane

size: 40%

min: 60px

Bottom pane

size: 30%

min: 60px

The split panes of the Splitter control can be oriented horizontally or vertically using the Orientation property.

Set orientation property to Horizontal to create horizontal splitter, which align panels left-to-right.
Set orientation property to Vertical to create vertical splitter, which align panels top-to-bottom.

The splitter allows resizing its panes when the drag separator (divider) bar is used to increase its dimension.