This is a migrated thread and some comments may be shown as answers.

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

3 Answers 191 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Andrew Benson
Top achievements
Rank 2
Andrew Benson asked on 02 Oct 2009, 03:53 PM
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%">...

 

 

3 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 07 Oct 2009, 01:04 PM
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.
0
Andrew Benson
Top achievements
Rank 2
answered on 07 Oct 2009, 01:17 PM
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.



0
Bill
Top achievements
Rank 1
answered on 25 Aug 2010, 08:31 PM

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
Tags
Splitter
Asked by
Andrew Benson
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Andrew Benson
Top achievements
Rank 2
Bill
Top achievements
Rank 1
Share this question
or