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

Anchor tags and RadPane scrolling

3 Answers 156 Views

Splitter

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

Scott asked on 04 Jan 2012, 06:33 PM

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

3 Answers, 1 is accepted

answered on 05 Jan 2012, 03:30 PM

Default.zip

Hi Scott,

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

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:

<%@ 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

Accepted

answered on 09 Jan 2012, 03:30 PM

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