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.

    • DefaultCS.aspx
    <%@ Page Language="c#" 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