New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Fill Container Size

Splitter with Width and Height set to 100%

Left Pane
Right Pane

If you place the RadSplitter into a container element in the page you can set its Width and Height properties to 100% and this will resize the splitter to fill the dimensions of the container element. You should set all the panes dimensions in % as well.

Instructions

The Splitter in the example above is nested into a layer with height set to 500px and width set to 800px. The Splitter's Width and Height properties are set to 100% to fill the entire layer size.

  • DefaultVB.aspx
<%@ Page Language="vb" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <h2>Splitter with Width and Height set to 100%</h2>
        <div style="width: 800px; height: 500px; border: 2px solid orange; overflow:hidden;">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="100%" Width="100%">
                <telerik:RadPane runat="server" ID="RadPane1" Width="30%">
                    Left Pane
                </telerik:RadPane>
                <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane runat="server" ID="Radpane2" Width="70%">
                    Right Pane <br />
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance