Scrolling Issue

[Rick]

Hello All,

I've been banging my head against the wall with this for days and I'm totally at a loss.

The site I'm working on has master/content pages, splitters w/ panes, tabs, etc. and I simply cannot get vertical scrollbars to work properly regardless of whether I use the browsers scrollbars or the rad control scrolling options.  It APPEARS that the scrollbars are being created relative to the screen resolution rather than the content of the page.  The smaller the resolution you have, the less data you can see.  You simply cannot scroll to the bottom of the content.

I've tried the overflow tags in every html/body/form/div tag and all splitters are set to heights of 100%.  Nothing I change has any effect.

This behavior is in both IE and FireFox.

Can anyone shead any light on this?

Thanks in advance,
Rick

[Rick]

Update...

If I manually set the height of the DIV that for the "main" splitter layout, the browser-based scrolling works (eg - will scroll down to the bottom of the hard-coded value I set, regardless of content).  See DIV id divMain below...

<%@ Page Language="C#" MasterPageFile="~/MasterPage00.master" AutoEventWireup="true" CodeFile="Connectivity.aspx.cs" Inherits="Connectivity" Title="JustWork..Please?" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div id="divMain" style="height:1200px;">
    <telerik:RadSplitter ID="MainSplitter" runat="server" LiveResize="False"
        Skin="Web20" Width="100%" BackColor="#E6EDF6"
        FullScreenMode="False" SplitBarsSize="" BorderStyle="None" BorderSize="0"
        BorderWidth="0px" Height="100%">

        <telerik:RadPane runat="server" id="LeftFillerPane" Scrolling="None"
            BorderStyle="None" BorderWidth="0px" ></telerik:RadPane>

        <telerik:RadPane runat="server" id="DataPane" Width="955px" Scrolling="None"
            BackColor="#E6EDF6" MaxWidth="955">

            <telerik:RadSplitter ID="MainDataSplitter" Runat="server" Skin="Web20"
                Orientation="Horizontal" BorderStyle="None" BorderSize="0"
                ResizeWithBrowserWindow="True" Width="955px" Height="100%">

                <telerik:RadPane runat="server" id="LogoPane" ContentUrl="PSLogo.aspx" BorderStyle="None"
                    Width="100%" Height="54px" Scrolling="None" Locked="True" BorderWidth="0px" >
                </telerik:RadPane>

                <telerik:RadPane ID="GraphicalDataPane" runat="server" BackColor="#E6EDF6"
                    Scrolling="None" BorderStyle="None" BorderWidth="0px" >

                    <telerik:RadSplitter ID="GrpahicalDataSplitter" runat="server" Skin="Web20"
                        BackColor="#E6EDF6" BorderStyle="None" BorderSize="0" BorderWidth="0px" Height="100%">

                        <telerik:RadPane ID="PanelBar" runat="server" Width="150px" BackColor="#E6EDF6"
                            Scrolling="None" ContentUrl="PanelBar.aspx" BorderStyle="None"
                            BorderWidth="0px" MaxWidth="150" >
                        </telerik:RadPane>

                        <telerik:RadPane ID="GraphicalData" runat="server" Width="100%" BorderStyle="None"
                            BackColor="#E6EDF6" Scrolling="None" BorderWidth="0px"
                            ContentUrl="TabControls.aspx" >
                        </telerik:RadPane>

                    </telerik:RadSplitter>
                </telerik:RadPane>

            </telerik:RadSplitter>

        </telerik:RadPane>

        <telerik:RadPane runat="server" id="RighFillerPane" Scrolling="None"
            BackColor="#E6EDF6" BorderStyle="None" BorderWidth="0px">
        </telerik:RadPane>

    </telerik:RadSplitter>
    </div>
</asp:Content>

...if that height attribute is set to 100%, the scrolling problem persists.  The content of these pages is a graph, some filler/filter content, then a table who's length is depedent on the filter values.

Thanks in advance,
Rick

[Svetlina Anati]

Hello Rick,

I am not able to understand what is the desired behavior and what you mean by correct behavior of scrollbars. II am confused because as far as I understood you want to have scrollbars and at the same time you have set scrolling to none.

In case you want to have the browser scrollbars I suggest to set the RadSplitter's height to the height of the content as explained here.

In case this is not what you are trying to achieve, please open a new support ticket and send me a sample, fully running project along with a detailed explanation of the desired layout and screenshots if possible.


Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rick]

Hello,

Sorry for the delay, I hadnt received the e-mail notification that there a repsonse to my thread.

Let me try to explain a little better.  I have, what I consider, to be a fairly deep nesting of splitters/panes.  I dont want anything except the browser to show scrollbars (hense the scrolling = none all over the place).  The browser scrollbar is coming up as expected but its not reflecting the full length of the page (does not scroll to the bottom of the content of the page).

I think it has to do with the way I'm implementing the tab controls.  You'll notice that I have one pane that points to TabControls.aspx.  Here is the content of that ASPX page...

<%@ Page Language="C#" MasterPageFile="~/MasterPage00.master" AutoEventWireup="true" CodeFile="TabControls.aspx.cs" Inherits="TabControls" Title="Untitled Page" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
        Skin="WebBlue" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab runat="server" Selected="True" SelectedIndex="0" Text="Blood Pressure">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Cholesterol">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Glucose">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Weight">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%"
        Height="100%" SelectedIndex="0">
        <telerik:RadPageView ID="RadPageView1" runat="server" Height="100%">
            <telerik:RadSplitter ID="BloodPressureDataSplitter" runat="server" Skin="Web20"
                BackColor="#E6EDF6" BorderStyle="None" BorderSize="0" BorderWidth="0px"
                Width="100%" Height="100%">
                <telerik:RadPane ID="GraphicalData" runat="server" Width="100%" BorderStyle="None"
                    BackColor="#E6EDF6" Scrolling="None" BorderWidth="0px"
                    ContentUrl="GraphicalData.aspx">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView2" runat="server">
            <telerik:RadSplitter ID="Cholesterol" runat="server" Skin="Web20"
                BackColor="#E6EDF6" BorderStyle="None" BorderSize="0" BorderWidth="0px"
                Width="100%" Height="100%">
                <telerik:RadPane ID="RadPane1" runat="server" Width="100%" BorderStyle="None"
                    BackColor="#E6EDF6" Scrolling="None" BorderWidth="0px"
                    ContentUrl="UnderConstruction.aspx">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView3" runat="server">
            <telerik:RadSplitter ID="Glucose" runat="server" Skin="Web20"
                BackColor="#E6EDF6" BorderStyle="None" BorderSize="0" BorderWidth="0px"
                Width="100%" Height="100%">
                <telerik:RadPane ID="RadPane2" runat="server" Width="100%" BorderStyle="None"
                    BackColor="#E6EDF6" Scrolling="None" BorderWidth="0px"
                    ContentUrl="UnderConstruction.aspx">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPageView>

        <telerik:RadPageView ID="RadPageView4" runat="server">
            <telerik:RadSplitter ID="Weight" runat="server" Skin="Web20"
                BackColor="#E6EDF6" BorderStyle="None" BorderSize="0" BorderWidth="0px"
                Width="100%" Height="100%">
                <telerik:RadPane ID="RadPane3" runat="server" Width="100%" BorderStyle="None"
                    BackColor="#E6EDF6" Scrolling="None" BorderWidth="0px"
                    ContentUrl="UnderConstruction.aspx">
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

</asp:Content>

Since the content of each of the tabs is going to be somewaht large, I dumped a splitter / pane into each RadPageView so I can work on / farm out each page separetly leveraging the ContentURL attribute.

The issue appears to be that the browser isnt taking into account the length of the final rendered page properly (the content has a table of a variable amount of row of data in a grid depending on the login and filter).

I hope that makes it clearer.  I will try to get a working example to you.

Thanks in advance,
Rick

[Svetlina Anati]

Hello Rick,

I tested the provided code but I loaded the telerik's web site in the RadPanes because I do not have your custom pages.

I again was not able to reproduce the problem as you can see from the attached test project.
I think that the best way to proceed is that you open a new support ticket and send me a reproduction project (your own one or to modify the attached) which is fully runnable along with a detailed explanation of the desired behavior.

Once I have a better understanding of the problem and the desired behavior, I will do my best to help.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center