Nested Tab Strip and ScrollChildren = True

2 posts, 1 answers
  1. Paul Mc
    Paul Mc avatar
    32 posts
    Member since:
    Sep 2007

    Posted 18 May 2009 Link to this post

    I have a nested splitter pane and a tab strip located in the lower tab.  With ScrollChildren = true, I'm getting what looks like 17px of margin at the bottom of my screen whenever a tab is added to the tab strip in Firefox.  Other browsers seem to work fine.  If i remove all the tabs, leaving the tab strip, then the white space disappears.

    I've attached a cut down version of my code below.     

    <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderSize="0" Height="100%" Width="100%" >                 
        <telerik:RadPane ID="RadPane1" runat="server" Height="100%" > 
          
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%" Height="100px" BorderSize="0" > 
                <telerik:RadPane ID="RadPane2" runat="server">  
                </telerik:RadPane> 
     
                <telerik:RadPane ID="RadPane3" runat="server" Height="26px">  
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true">  
                        <Tabs> 
                            <telerik:RadTab Text="Tab 1"></telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTabStrip> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
     
        </telerik:RadPane> 
    </telerik:RadSplitter> 

     

    I have seen other threads with similar problems, but the solutions for those dont appear to be applicable to this issue.

    Thanks in advance.
  3. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 18 May 2009 Link to this post

    Hi Paul,

    Please find below a sample code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            html, body, form  
            {  
                margin: 0;  
                height: 100%;  
                width: 100%;  
                overflow: hidden;  
            }  
        </style> 
    </head> 
    <body> 
        <form runat="server" id="mainForm" method="post">  
        <telerik:RadScriptManager ID="ScriptManager" runat="server" /> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderSize="0" Height="100%" 
            Width="100%">  
            <telerik:RadPane ID="RadPane1" runat="server" Height="100%">  
                <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%" 
                    Height="100px" BorderSize="0">  
                    <telerik:RadPane ID="RadPane2" runat="server">  
                    </telerik:RadPane> 
                    <telerik:RadPane ID="RadPane3" runat="server" Height="26px">  
                        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="True">  
                            <Tabs> 
                                <telerik:RadTab runat="server" Text="Root RadTab1">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab2">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab3">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab4">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab5">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab6">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab7">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab8">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab9">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab10">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab11">  
                                </telerik:RadTab> 
                                <telerik:RadTab runat="server" Text="Root RadTab12">  
                                </telerik:RadTab> 
                            </Tabs> 
                        </telerik:RadTabStrip> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 
    </html> 

    ncerely yours,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top