This is the problem I'm having:
I have
<
telerik:RadSplitter
<telerik:RadPane
<telerik:RadTabStrip
The Tabstrip is connected to MultiPage.
One of the pages has RadTreeVew with its content being populated dynamically.
When I expand the tree nodes to the point the their height exceeds the height of the panel the scroll bar apprears but when I scroll it the tabs scroll alone with it.
I believe the tabs should stay in their position.
I believe the scroll bar belongs to the panel on which the Tree is located but I believe that the TreeView's scroll bar should be displayed.
<%
@ Control Language="C#" AutoEventWireup="true" CodeFile="ContentPanel.ascx.cs" Inherits="ContentPanel" %>
<%
@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<
telerik:RadSplitter ID="RadSplitter1" Runat="server" Width="100%"
Skin="Vista">
<telerik:RadPane ID="RadPane1" Runat="server" width="30%" Scrolling="Both">
<telerik:RadTabStrip ID="TOCTab" runat="server" SelectedIndex="3" MultiPageID="MultiPageProjects"
Skin="Web20" PerTabScrolling="True" ScrollChildren="True">
<tabs>
<telerik:RadTab runat="server" Text="TOC" ScrollChildren="true">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Figures">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Tables">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Search" Selected="True">
</telerik:RadTab>
</tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="MultiPageProjects" runat="server" SelectedIndex="3"
CssClass="multiPage" ScrollBars="Auto">
<telerik:RadPageView ID="PageViewTOC" runat="server" Width="100%"
Selected="True">
<telerik:RadTreeView ID="TOCTree" Runat="server" Skin="Hay">
</telerik:RadTreeView>
</telerik:RadPageView>
<telerik:RadPageView ID="PageViewExchanges" runat="server"
CssClass="pageViewEducation" Width="100%" Height="100%">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server">
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server" Width="100%"
Height="100%">
</telerik:RadPageView>
</telerik:RadMultiPage>
</
telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitBar1" runat="server">
</telerik:RadSplitBar>
<telerik:RadPane ID="RadPane2" Runat="server">
second pane
</telerik:RadPane>
</telerik:RadSplitter>
2 Answers, 1 is accepted
What is the exact browser that you use?
Actually the scroll comes from the RadPane(RadPane1). Please find below a solution which works in Firefox, Chrome:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><html><head> <style type="text/css"> #PageViewTOC { height: auto !important; } .Tabstrip_Fixed { position:fixed !important; } </style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><telerik:RadSplitter ID="RadSplitter1" Runat="server" Width="100%" Skin="Vista"><telerik:RadPane ID="RadPane1" runat="server" Width="30%" Scrolling="Both"> <telerik:RadTabStrip ID="TOCTab" runat="server" SelectedIndex="3" MultiPageID="MultiPageProjects" Skin="Web20" PerTabScrolling="True" ScrollChildren="True" CssClass="Tabstrip_Fixed"> <Tabs> <telerik:RadTab runat="server" Text="TOC" ScrollChildren="true"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Figures"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Tables"> </telerik:RadTab> <telerik:RadTab runat="server" Text="Search" Selected="True"> </telerik:RadTab> </Tabs> </telerik:RadTabStrip> <telerik:RadMultiPage ID="MultiPageProjects" runat="server" SelectedIndex="3" CssClass="multiPage" ScrollBars="Auto"> <telerik:RadPageView ID="PageViewTOC" runat="server" Width="100%" Selected="True"> <telerik:RadTreeView ID="TOCTree" runat="server" Skin="Hay"> </telerik:RadTreeView> </telerik:RadPageView> <telerik:RadPageView ID="PageViewExchanges" runat="server" CssClass="pageViewEducation" Width="100%" Height="100%"> </telerik:RadPageView> <telerik:RadPageView ID="RadPageView3" runat="server"> </telerik:RadPageView> <telerik:RadPageView ID="RadPageView4" runat="server" Width="100%" Height="100%"> </telerik:RadPageView> </telerik:RadMultiPage></telerik:RadPane><telerik:RadSplitBar ID="RadSplitBar1" runat="server"></telerik:RadSplitBar><telerik:RadPane ID="RadPane2" runat="server"> second pane</telerik:RadPane></telerik:RadSplitter> </form></body></html>Greetings,
Helen
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Rank 1
I added the css to my code and it works now.
I still don't think it is the perfect solution because as I scroll the content I see that the tabs stay on top I can see the data/text being scrolled between the tabs.
I think I can leave with this.
Thanks a lot.