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

Min/Max Pane Size

Left Pane
(Width="100" MaxWidth="200" MinWidth="30")
Right Pane
(Width="200" MaxWidth="250")
Top Pane
(Height="100" MaxHeight="200" MinHeight="50")
Bottom Pane
(MaxHeight = "250")

RadSplitter allows you to define minimum and maximum size to which a pane can be resized. Use the MinWidth, MaxWidth and MinHeight, MaxHeight properties of the RadPane object to set these restrictions. You can disable the scrollbars of a pane by setting Scrolling property of the RadPane to none.

Instructions

Using the resize bars try to resize the panes in the Splitters above. You will receive a feedback from the resize bars indicating what is the max/min size of the pane.

  • 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-containers">
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300">
                <telerik:RadPane ID="RadPane1" runat="server" MinWidth="30" MaxWidth="200" Width="100">
                    Left Pane
                        <br />
                    (Width="100" MaxWidth="200" MinWidth="30")
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane2" runat="server" MaxWidth="250" Width="200">
                    Right Pane
                        <br />
                    (Width="200" MaxWidth="250")
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter2" runat="server" Height="300" Width="300" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane3" runat="server" Height="100" MinHeight="50" MaxHeight="200">
                    Top Pane
                        <br />
                    (Height="100" MaxHeight="200" MinHeight="50")
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar2" runat="server">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane4" runat="server" MaxHeight="250">
                    Bottom Pane
                        <br />
                    (MaxHeight = "250")
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance