Web Services
Top achievements
Rank 2
Rank 2
Web Services
asked on 12 Aug 2009, 08:45 PM
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 http://alpha.clickablecommunity.com/ 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ 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" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"
scroll="no">
<form id="Form1" method="post" runat="server" style="height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
<div id="loginDiv">
<loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
</div>
<div id="topDiv">
<div id="image" class="topDivImage">
<img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
</div>
<div id="viewMenu" class="viewMenu">
Menu goes here
</div>
</div>
<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>
</div>
</telerik:RadPane>
<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">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
css page
body {
height:100%;
}
#leftPanel{
display:inline;
height:500px;
width:220px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.loginLabel{
padding-right: 10px;
padding-bottom: 10px;
}
.loginTextBox{
width: 120px;
}
.leftPanelContent{
}
#topDiv{
height: 60px;
border-bottom-width: 4px;
border-bottom-color: Gray;
border-bottom-style:groove;
}
#loginDiv{
position: absolute;
display:inline;
right: 10px;
top: 5px;
}
#menuDiv{
position: absolute;
padding-top: 75px;
margin-left: auto;
margin-right:auto;
}
.AllContent{
border-right: none;
}
#MainContent{
display:inline;
height:500px;
width:400px;
}
.displayInline{
display: inline;
}
#divMap{
height:480px;
width:700px;
border: groove 4px #EEEEEE;
border-right: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
}
.RightPanelPadding
{
position: relative;
height:500px;
padding-left: 35px;
padding-top:10px;
}
.topDivImage{
position: absolute;
top: 0;
left: 0;
display:inline;
width:220px;
}
.viewMenu{
padding-left:220px;
margin-right:auto;
margin-left:auto;
text-align:center;
width:800px;
vertical-align:bottom;
padding-top: 46px;
}
.emptyTextboxText{
font-style:italic;
font-size:10px;
color: #D8D8D8;
}
<%@ 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ 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" />
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body id="MasterBody" runat="server" style="margin: 0px; height: 100%; overflow: hidden;"
scroll="no">
<form id="Form1" method="post" runat="server" style="height: 100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
<div id="loginDiv">
<loginDivTemplate:login id="loginPanelContent" runat="server"></loginDivTemplate:login>
</div>
<div id="topDiv">
<div id="image" class="topDivImage">
<img src="images/logo.jpg" alt="Clickable Community Logo" width="200" height="75" />
</div>
<div id="viewMenu" class="viewMenu">
Menu goes here
</div>
</div>
<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>
</div>
</telerik:RadPane>
<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">
</asp:ContentPlaceHolder>
</telerik:RadPane>
</telerik:RadSplitter>
</form>
</body>
</html>
css page
body {
height:100%;
}
#leftPanel{
display:inline;
height:500px;
width:220px;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
.loginLabel{
padding-right: 10px;
padding-bottom: 10px;
}
.loginTextBox{
width: 120px;
}
.leftPanelContent{
}
#topDiv{
height: 60px;
border-bottom-width: 4px;
border-bottom-color: Gray;
border-bottom-style:groove;
}
#loginDiv{
position: absolute;
display:inline;
right: 10px;
top: 5px;
}
#menuDiv{
position: absolute;
padding-top: 75px;
margin-left: auto;
margin-right:auto;
}
.AllContent{
border-right: none;
}
#MainContent{
display:inline;
height:500px;
width:400px;
}
.displayInline{
display: inline;
}
#divMap{
height:480px;
width:700px;
border: groove 4px #EEEEEE;
border-right: groove 4px #EEEEEE;
margin-left: auto;
margin-right: auto;
}
.RightPanelPadding
{
position: relative;
height:500px;
padding-left: 35px;
padding-top:10px;
}
.topDivImage{
position: absolute;
top: 0;
left: 0;
display:inline;
width:220px;
}
.viewMenu{
padding-left:220px;
margin-right:auto;
margin-left:auto;
text-align:center;
width:800px;
vertical-align:bottom;
padding-top: 46px;
}
.emptyTextboxText{
font-style:italic;
font-size:10px;
color: #D8D8D8;
}
1 Answer, 1 is accepted
0
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:
http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx
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,
Svetlina
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.
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:
http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx
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,
Svetlina
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.