Nested Splitter Layout Question

2 posts, 0 answers
  1. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 26 Oct 2010 Link to this post

    If I put a RadSplitter inside a DIV that has margins set on it, the RadSplitter behaves as expected. However, if the RadSplitter is nested inside another RadSplitter (and still inside a DIV with margins set on it) then the width gets messed up.

    Here is an example:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
      
        <telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" Height="100%" Width="100%">
            <telerik:RadPane ID="ContentPane" runat="server">
                <div style="margin: 0 30px 0 30px;">
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Height="100%" Width="100%">
                        <telerik:RadPane ID="TopPane" runat="server" Height="50%">
                            Top Pane
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="SplitBar" runat="server" />
                        <telerik:RadPane ID="BottomPane" runat="server" Height="50%">
                            Bottom Pane
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </div>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

    Naturally the actual layout is much more complex, but I've narrowed my problem down to this sample code. I would expect this page to render without any scrollbars at all. Is there a way to accomplish this?

    Scott
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 28 Oct 2010 Link to this post

    Hi Scott,

    By design, if RadSplitter is nested inside another splitter it inherits the size of its parent pane. To stop this behavior you need to set ResizeWithParentPane property of the nested splitter to false, e.g:
    <telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" Height="100%" Width="100%">
        <telerik:RadPane ID="ContentPane" runat="server">
            <div style="margin: 0 30px 0 30px; height:100%;">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeWithParentPane="false" Orientation="Horizontal" Height="100%" Width="100%">
                    <telerik:RadPane ID="TopPane" runat="server" Height="50%">
                        Top Pane
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="SplitBar" runat="server" />
                    <telerik:RadPane ID="BottomPane" runat="server" Height="50%">
                        Bottom Pane
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
        </telerik:RadPane>
    </telerik:RadSplitter>

    Also, when setting RadSplitter to use percentage values to its Height property you need to make sure that all its parent have set Height (as percent or strict value).

    I hope this helps.

    Regards,
    Dobromir
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top