No scrolling in nested splitter pane when containing pane is Scrolling="None"

4 posts, 0 answers
  1. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 02 Oct 2009 Link to this post

    I saw the previous post about scrolling and nested splitters, but the comments there didn't address my problem.

    My nested splitters work fine in IE7, but in IE8 the panes in the nestedsplitter will not scroll if the containing pane is set to Scrolling="None". The pane at the bottom of this sample should scroll:

     

    <telerik:RadSplitter ID="ExplorerSplitter"  runat="server" Height="100%" Orientation="Vertical" Width="100%" HeightOffset="104" VisibleDuringInit="false" LiveResize="false" >

    <telerik:RadPane CssClass="GridPane" ID="GridPane" runat="server" Scrolling="None" Height="100%" BackColor="white">

    <telerik:RadSplitter ID="GridSplitter" runat="server" Height="100%"  Orientation="Horizontal" Width="100%" VisibleDuringInit="false" LiveResize="false" BorderSize="0" CssClass="ExplorerGridSplitter">

    <telerik:RadPane ID="GridListPane" runat="server" Scrolling="X" BorderWidth="0" BackColor="white" Height="100%">...

     

     

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 07 Oct 2009 Link to this post

    Hello Andrew,
    I tested your code in IE7, IE8 and FF and the result in all three browsers was the same - the RadPane displayed scrollbars. I have attached a screenshot of the result I get in IE8. Below is the code of the page that I used for my test:
    <head runat="server"
        <title></title
        <style type="text/css"
            html, body, form 
            { 
                height: 100%; 
                margin: 0px; 
                overflow: hidden; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <telerik:RadSplitter ID="ExplorerSplitter" runat="server" Height="100%" Orientation="Vertical" 
            Width="100%" HeightOffset="104" VisibleDuringInit="false" LiveResize="false"
            <telerik:RadPane ID="GridPane" runat="server" Scrolling="None" BackColor="white"
                <telerik:RadSplitter ID="GridSplitter" runat="server" Height="100%" Orientation="Horizontal" 
                    Width="100%" VisibleDuringInit="false" LiveResize="false" BorderSize="0"
                    <telerik:RadPane ID="GridListPane" runat="server" Scrolling="X" BorderWidth="0" BackColor="white" 
                        Height="100%"><div style="width:2000px;">text</div> 
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        </form> 
    </body> 

    Could you please post here the complete code of your test page, together with all the CSS that you use for the page and specify the exact version of the suite that you use? The additional styles that you apply to the RadPanes/RadSplitters may cause such problems.

    Greetings,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew Benson
    Andrew Benson avatar
    14 posts
    Member since:
    Jan 2005

    Posted 07 Oct 2009 Link to this post

    Thanks for the reply. I was able to resolve the issue.

    My problem was with the width of the ScrollArea. I was setting the ScrollHeight with JavaScript to fill a SplitterPane that had Scrolling = "none". I found I also needed to set the width of the ScrollArea as well.



  5. Bill
    Bill avatar
    26 posts
    Member since:
    Jun 2008

    Posted 25 Aug 2010 Link to this post

    I too had the same problem and for others reading this post here is what I did:
    This set up will maintain the verticle scroll bar on the left (y-scroll bar) of the browser and the bottom (x-scroll bar) only in the content RadPane so that when you put a really wide control such as a RadGrid that has many columns that reads left to right the scroll bar will appear at the bottom. Note the overflow: hidden for the styling of the form, body, html this will hide the outer scroll bars for browser window.  Also note in the "ParentDivElement" (wrapper for all the splitters and panes) width and height has to be 100%.

    Hope this code helps.  I know I had a rough time that is why I am posting this solution.  Let me know if you like it.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MyAccount_MasterPage" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
        </telerik:RadStyleSheetManager>
            form, body, html
            {
                height: 99%;
                margin: 0px 0px 30px 0px;
                padding: 0px 0px 30px 0px;
                overflow: hidden;
                /*NEW: THIS REMAINS VISIABLE SEE BODY TAG BELOW */
            }
            .style1
            {
                color: #666666;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="ParentDivElement" style="height: 100%; width:100%;">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            </telerik:RadScriptManager>
            <telerik:RadSplitter ID="MainRadSplitter" runat="server" 
                Orientation="Horizontal" Width="100%" Height="100%" LiveResize="True">
                <telerik:RadPane ID="LogoRadPane" runat="server" Height="50px" MaxHeight="55" 
                    MinWidth="1000" ForeColor="#CCCCCC">
                    <telerik:RadSplitter ID="LogoRadSplitter" runat="server" Height="170px" 
                        VisibleDuringInit="false">
                        <telerik:RadPane ID="ToolBarRadPane" runat="server" Locked="True" 
                            MaxHeight="65" MaxWidth="1000" MinWidth="150" Scrolling="None" 
                            Width="200px">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
    </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="LogoRadSplitBar" runat="server" Width="100%">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="ToolBarMainRadPane" runat="server" MaxHeight="65" 
                            Scrolling="none" MinWidth="500">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBarTop" runat="server" CollapseMode="Forward" 
                    Width="100%">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="MainRadPane" runat="server" MinWidth="500">
                    <telerik:RadSplitter ID="NestedRadSplitter" Runat="server" LiveResize="True" 
                        Width="100%">
                        <telerik:RadPane ID="LeftRadPane" Runat="server" MaxWidth="300" MinWidth="150" 
                            Width="200px">
                            <span style="color: #ff6600"></span>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="VerticalRadSplitBar" runat="server" 
                            CollapseMode="Forward">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="ContentRadPane" runat="server" Width="100%">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    Bill H. (2 year telerik customer)
    www.MHEControl.com
Back to Top