ASP.NET Splitter Tutorial - Size

Vertical Splitter; Vertical Splitter examples;
Horizontal Splitter; Horizontal Splitter examples;

Vertical Splitter

Width

The most used splitter panel property is WidthDefault.
Also for other useful splitter properties see Documentation.

Unless Width property is set to a positive value, splitter always takes the width of the container it is in.


Height

Splitter always sets its height to the height of its container.

If splitter is directly between <body> tags, then height is the window height minus optional header height and minus the footer height. This way the splitter's height is never larger than the window height, so the whole splitter is always visible along with header and footer.

View live examples.

Horizontal Splitter

Height

The most used splitter panel property is HeightDefault.
Also for other useful splitter properties see Documentation.

Unless Height property is set to a positive value, splitter always takes the height of the container it is in.


Width

Splitter always sets its width to the width of its container.

If splitter is directly between <body> tags, then width is the window width minus the WidthAfter value. This way the splitter's width is never larger than the window width, so the whole splitter is always visible.

View live examples.

Vertical Splitter examples - all examples open in new window

1. Full window width and height. Open example.

<html>
<head></head>
<body>
<obspl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...


2. WidthDefault property of the left panel. Open example.

<obspl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel WidthDefault="300">
<Content>
... Left Panel content here ...
...


3. WidthDefault property of the right panel. Open example.

<obspl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
</Content>
</LeftPanel>
<RightPanel WidthDefault="300">
<Content>
... Right Panel content here ...
...


4. With header and footer. Open example.

<html>
<head></head>
<body>
<div style="height:100px;">
... header content here ...
</div>
<obspl:Splitter FooterHeight="50" runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
<Content>
</LeftPanel>
<RightPanel>
<Content>
... Right Panel content here ...
</Content>
</RightPanel>
</obspl:Splitter>
<div style="height:50px;">
... footer content here ...
</div>
...


5. Inside a div with fixed size. Open example.

<div style="width:600px;height:500px">
<obspl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...


6. Inside a div with dynamic size. Open example.

<div style="width:70%;height:80%">
<obspl:Splitter runat="server" StyleFolder="styles/default">
<LeftPanel>
<Content>
... Left Panel content here ...
...



Download Download these working examples.

Horizontal Splitter examples - all examples open in new window

1. Full window width and height. Open example.

<html>
<head></head>
<body>
<obspl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel>
<Content>
... Top Panel content here ...
...


2. HeightDefault property of the top panel. Open example.

<obspl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel HeightDefault="300">
<Content>
... Top Panel content here ...
...


3. HeightDefault property of the bottom panel. Open example.

<obspl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel>
<Content>
... Top Panel content here ...
</Content>
</TopPanel>
<BottomPanel HeightDefault="300">
<Content>
... Bottom Panel content here ...
...


4. Inside a div with fixed size. Open example.

<div style="width:600px;height:500px">
<obspl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel>
<Content>
... Top Panel content here ...
...


5. Inside a div with dynamic size. Open example.

<div style="width:70%;height:80%">
<obspl:HorizontalSplitter runat="server" StyleFolder="styles/default">
<TopPanel>
<Content>
... Top Panel content here ...
...



Download Download these working examples.

"Got only two words ... You ROCK!!!"

Randy Finster