Anchor tags and RadPane scrolling

4 posts, 1 answers
  1. scott
    scott avatar
    35 posts
    Member since:
    Mar 2011

    Posted 04 Jan 2012 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 Jan 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. scott
    scott avatar
    35 posts
    Member since:
    Mar 2011

    Posted 05 Jan 2012 Link to this post

    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
  5. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 09 Jan 2012 Link to this post

    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
    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
Back to Top