Here is a simplified scenario that I would like to achieve.
On a page I have a RadSplitter set to horizontal orientation with two RadPanes. Both panes allow scrolling. In the top-most pane, I have a series of anchor tags that bookmark to various sections to the bottom-most pane. Think of a FAQ site where one can click on the question to then scroll to the answer of that question, and that is the type of functionality that I am trying to achieve.
When one of my links is clicked, the bottom-most pane is scrolled to the section I want, so that is working great. The problem is that the entire page scrolls as well, so that the top-most pane and the link that was clicked are now scrolled off the page. Any idea for a way around this so that the page isn't scrolled at all... just the bottom-pane would be scrolled to the appropriate section?
Thanks,
-Scott
On a page I have a RadSplitter set to horizontal orientation with two RadPanes. Both panes allow scrolling. In the top-most pane, I have a series of anchor tags that bookmark to various sections to the bottom-most pane. Think of a FAQ site where one can click on the question to then scroll to the answer of that question, and that is the type of functionality that I am trying to achieve.
When one of my links is clicked, the bottom-most pane is scrolled to the section I want, so that is working great. The problem is that the entire page scrolls as well, so that the top-most pane and the link that was clicked are now scrolled off the page. Any idea for a way around this so that the page isn't scrolled at all... just the bottom-pane would be scrolled to the appropriate section?
Thanks,
-Scott
3 Answers, 1 is accepted
0
Hi Scott,
I tried to reproduce the described problem but to no avail. Could you please provide more detailed information on the specific scenario?
For your convenience I have attached my sample page, could you please modify it to a point where the problem occurs and send it back?
Greetings,
Dobromir
the Telerik team
I tried to reproduce the described problem but to no avail. Could you please provide more detailed information on the specific scenario?
- Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
- Under which browser and its version the problem occurs?
- How do you apply the scrolling to the specific section? If you are using JavaScript to achieve the navigation, could you please provide the source code so we can examine and debug it locally?
- Could you please provide a simple fully runnable project reproducing the problem so we can investigate it further?
For your convenience I have attached my sample page, could you please modify it to a point where the problem occurs and send it back?
Greetings,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
scott
Top achievements
Rank 1
answered on 05 Jan 2012, 07:55 PM
Thank you for the prompt reply, Dobromir.
We are on Telerik version 2011.3.1115.40 and are under .NET Framework 4.0.
The problem is most notable under IE 8, but we can also see it under FF 8.0.1 and Chrome 16.0.912.63.
I am currently just using simple anchor tags. If you have a better method to scroll a single pane to a specific section, I'd love to try it.
Attaching a very simplified page of what I am trying to achieve. To replicate, scroll the top pane to, say, topic 70 and click the link. The behavior then jumps the page down completely to the second pane. In my actual project, I added splitter.heightoffset values to control the percentage of the splitter with the other elemnts on the page, but it is not needed here to demonstrate the behavior.
Thank you in advance for looking at this, and I'm hoping that you can find a solution to my desired behavior.
-Scott
Page file:
Code Behind:
We are on Telerik version 2011.3.1115.40 and are under .NET Framework 4.0.
The problem is most notable under IE 8, but we can also see it under FF 8.0.1 and Chrome 16.0.912.63.
I am currently just using simple anchor tags. If you have a better method to scroll a single pane to a specific section, I'd love to try it.
Attaching a very simplified page of what I am trying to achieve. To replicate, scroll the top pane to, say, topic 70 and click the link. The behavior then jumps the page down completely to the second pane. In my actual project, I added splitter.heightoffset values to control the percentage of the splitter with the other elemnts on the page, but it is not needed here to demonstrate the behavior.
Thank you in advance for looking at this, and I'm hoping that you can find a solution to my desired behavior.
-Scott
Page file:
<%@ Page Language="VB" AutoEventWireup="false" Inherits="SplitterTest._index" Codebehind="index.aspx.vb" ValidateRequest="false" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
html
>
<
head
> <
title
>Splitter Sample</
title
>
<
style
type
=
"text/css"
>
html, body, form
{
margin:0;
padding:0;
height: 100%;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"masterForm"
runat
=
"server"
style
=
"border: 0px; height: 100%;"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
table
id
=
"tblHeader"
style
=
"text-align: center; width: 100%"
>
<
tr
>
<
td
>THIS
</
td
>
</
tr
>
<
tr
>
<
td
>IS
</
td
>
</
tr
>
<
tr
>
<
td
>A
</
td
>
</
tr
>
<
tr
>
<
td
>PAGE
</
td
>
</
tr
>
<
tr
>
<
td
>HEADER
</
td
>
</
tr
>
</
table
>
<
table
width
=
"95%"
border
=
"0"
cellspacing
=
"0"
cellpadding
=
"0"
align
=
"center"
style
=
"height: 100%"
>
<
tr
>
<
td
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
Orientation
=
"Horizontal"
ResizeWithParentPane
=
"true"
Width
=
"99%"
Height
=
"100%"
ResizeMode
=
"Proportional"
>
<
telerik:RadPane
ID
=
"topPane"
runat
=
"server"
Scrolling
=
"Both"
Width
=
"100%"
BorderWidth
=
"0"
Height
=
"200px"
>
<
telerik:RadTreeView
ID
=
"tvFAQLinks"
runat
=
"server"
CheckBoxes
=
"False"
Font-Bold
=
"true"
/>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"MiddleSplitbar"
runat
=
"server"
CollapseMode
=
"Forward"
/>
<
telerik:RadPane
ID
=
"bottomPane"
runat
=
"server"
Scrolling
=
"Both"
Height
=
"100%"
>
<
asp:Panel
ID
=
"pnlAnswers"
runat
=
"server"
/>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
td
>
</
tr
>
</
table
>
<
table
id
=
"tblFooter"
style
=
"text-align: center; width: 100%"
>
<
tr
>
<
td
>THIS
</
td
>
</
tr
>
<
tr
>
<
td
>IS
</
td
>
</
tr
>
<
tr
>
<
td
>A
</
td
>
</
tr
>
<
tr
>
<
td
>PAGE
</
td
>
</
tr
>
<
tr
>
<
td
>FOOTER
</
td
>
</
tr
>
</
table
>
</
form
>
</
body
>
</
html
>
Code Behind:
Imports
System
Imports
System.IO
Imports
System.Web.UI
Imports
System.Web.UI.WebControls
Imports
System.Text.RegularExpressions
Imports
System.Data.SqlClient
Imports
System.Data
Imports
Telerik.Web.UI
Public
Class
_index
Inherits
Web.UI.Page
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
If
Not
IsPostBack
Then
GetFAQLinksFromTopics()
End
If
End
Sub
Private
Sub
GetFAQLinksFromTopics()
'Dim strTopics As String = ""
Dim
blnFirstTopic
As
Boolean
=
True
For
idx
As
Integer
= 1 to 100
Dim
tblFAQAnswers
As
HtmlTable
Dim
rowFAQAnswers
As
HtmlTableRow
Dim
cellFAQAnswers
As
HtmlTableCell
Dim
lblTopic
As
Label
Dim
NewParent
As
New
RadTreeNode
'Setup Topic treeview
NewParent.Text =
"<a href='#"
&
"t"
& idx.ToString &
"' >Topic "
& idx.ToString &
"</a>"
tvFAQLinks.Nodes.Add(NewParent)
'Setup detail section
tblFAQAnswers =
New
HtmlTable
pnlAnswers.Controls.Add(tblFAQAnswers)
If
Not
blnFirstTopic
Then
rowFAQAnswers =
New
HtmlTableRow
cellFAQAnswers =
New
HtmlTableCell
cellFAQAnswers.ColSpan = 2
cellFAQAnswers.Controls.Add(new LiteralControl(
"<hr/>"
))
rowFAQAnswers.Cells.Add(cellFAQAnswers)
tblFAQAnswers.Rows.Add(rowFAQAnswers)
End
If
rowFAQAnswers =
New
HtmlTableRow
cellFAQAnswers =
New
HtmlTableCell
cellFAQAnswers.ColSpan = 2
cellFAQAnswers.Style(
"padding-left"
) =
"4px"
Dim
ancTopic
As
New
HtmlAnchor
ancTopic.Name =
"t"
& idx.ToString
cellFAQAnswers.Controls.Add(ancTopic)
lblTopic =
New
Label
lblTopic.Text =
"Topic "
& idx.ToString
lblTopic.Style(
"font-underline"
) =
"True"
lblTopic.Style(
"font-weight"
) =
"Bold"
lblTopic.Style(
"font-size"
) =
"Large"
cellFAQAnswers.Controls.Add(lblTopic)
rowFAQAnswers.Cells.Add(cellFAQAnswers)
tblFAQAnswers.Rows.Add(rowFAQAnswers)
rowFAQAnswers =
New
HtmlTableRow
cellFAQAnswers =
New
HtmlTableCell
cellFAQAnswers.ColSpan = 2
Dim
lblTopicDesc
As
New
Label
lblTopicDesc.Text =
" "
&
"This is the description for Topic "
& idx.ToString
cellFAQAnswers.Style(
"padding-left"
) =
"4px"
cellFAQAnswers.Controls.Add(lblTopicDesc)
rowFAQAnswers.Cells.Add(cellFAQAnswers)
tblFAQAnswers.Rows.Add(rowFAQAnswers)
Next
End
Sub
End
Class
0
Accepted
Hi Scott,
Thank you for provided sample page. The problem that you experience is not directly related to RadSplitter but is due to the incorrect layout's setup - the header and footer tables are siblings to the content table which have set height to 100%. This is causing the incorrect interpretation by the browser, because setting size of an element in percentage values means that the current element should be X% of the parents property, and since there is more than one element occupying the parent element this is causing the paradox - the child element should be as high as the parent, but the parent should extend its size because there are other elements.
Basically, the problem is caused by the fact that the <table> elements are extended to display their content regarding the fact that a they have set height explicitly. I would recommend you to remake the layout and avoid using tables.
Regards,
Dobromir
the Telerik team
Thank you for provided sample page. The problem that you experience is not directly related to RadSplitter but is due to the incorrect layout's setup - the header and footer tables are siblings to the content table which have set height to 100%. This is causing the incorrect interpretation by the browser, because setting size of an element in percentage values means that the current element should be X% of the parents property, and since there is more than one element occupying the parent element this is causing the paradox - the child element should be as high as the parent, but the parent should extend its size because there are other elements.
Basically, the problem is caused by the fact that the <table> elements are extended to display their content regarding the fact that a they have set height explicitly. I would recommend you to remake the layout and avoid using tables.
Regards,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now