Scrolling won't work

2 posts, 0 answers
  1. Web Services
    Web Services avatar
    243 posts
    Member since:
    Apr 2008

    Posted 12 Aug 2009 Link to this post

    I have a page with a radsplitter. On the left side there is a radpanel inside of it. The problem I am having is that if the radpanel grows bigger than the page, you can't scroll. I have scrolling enabled but it doesn't work. You can see my problem by expanding the first option "Live Music" under events here here is my masterpage file and css
    <%@ Master Language="VB" AutoEventWireup="false" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="sidepanel" TagName="sidebar" src="/ascx/leftMenu.ascx"%>
    <%@ Register TagPrefix="loginDivTemplate" TagName="login" src="/ascx/loginTemplate.ascx"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <%@ import namespace="System.Data" %>
    <%@ import namespace="System.Data.Sql" %>
    <%@ import namespace="System.Data.SqlClient" %>
    <%@ import namespace="Telerik.Web.UI" %>
    <head id="Head1" runat="server">
        <link href="ClickableCommunity.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="head" runat="server">
    <body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"
        <form id="Form1" method="post" runat="server" style="height: 100%">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <br />
        <asp:ContentPlaceHolder ID="header" runat="server">
        <div id="loginDiv">
            <loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
        <div id="topDiv">
            <div id="image" class="topDivImage">
                <img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
            <div id="viewMenu" class="viewMenu">
                Menu goes here
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Width="100%"
            Height="100%" CssClass="AllContent" LiveResize="true">
            <telerik:RadPane ID="LeftRadPane1" runat="server" Width="220px" Scrolling="Both"
                BorderStyle="None" BorderSize="0">
                <div id="leftPanel">
                    <sidepanel:sidebar id="leftPanelContent" runat="server"></sidepanel:sidebar>
            <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false"
                ForeColor='Green' />
            <telerik:RadPane ID="RightRadPane1" runat="server" CssClass="RightPanelPadding" Scrolling="Both"
                BorderStyle="None" BorderSize="0">
                <asp:ContentPlaceHolder ID="MainContent" runat="server">

    css page
    body {
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        padding-right: 10px;
        padding-bottom: 10px;
        width: 120px;
        height: 60px;
        border-bottom-width: 4px;
        border-bottom-color: Gray;
        position: absolute;
        right: 10px;
        top: 5px;
        position: absolute;
        padding-top: 75px;
        margin-left: auto;
        border-right: none;
        display: inline;
        border: groove 4px #EEEEEE;
        border-right: groove 4px #EEEEEE;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-left: 35px;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 46px;

        color: #D8D8D8;

  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 17 Aug 2009 Link to this post

    Hi Web Services,

    Thank you for the provided code and live url, I examined the page and I was able to reproduce the problem. However, I was not able to completely understand the reason for it without examining it locally. By analyzing the page with the IEDevToolBar I saw that the scrolling of the panes is enabled and I believe that the problem does not come from them.

    I attached the sample demo which I built based on your code - as you can see there, when you expand the root node, more nodes are shown and a scrollbar is generated. I would like to kindly ask you to modify my demo in order to reproduce the problem, open a new support ticket and send it to me. That will make me able to investigate further the layout and I will do my best to help.

    On a side note, I also suggest to examine the following KB article, which demonstrates how to make the splitter resize according to its content:

    If you choose this approach, uyou can resize the splitter when the treeview node is clicked and  you should just enable the scrolling on the page by removing your CSS which disables it and the browser scrollbars will be generated after the splitter resizes.

    All the best,
    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