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

Tabstrip ScrollChildren="True" Issue

1 Answer 178 Views

TabStrip

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

Neha asked on 18 Feb 2011, 09:03 PM

ScrollForwardBtnDisable.jpg

ScrollingTabIssuewithCromeFirefox.JPG

Hi,

In my application i wanted to use tabstrip with ten tabs. Once i appplied ScrollChildern="True".

1.Tab Scrolling is not working in Firefox/Google Crome
2. In Internet explorer i can see scrolling buttons but if i reach at 5th tab and if i hit button(Basically when page post back) Scrolling reverse button get disable.

I am attaching screenshots and code block. Let me know what i m doing wrong.

Thanks,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabStripScrollTest.aspx.cs" Inherits="RadControlsWebApp1.TabStripScrollTrest" %>

<!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" >

<head runat="server">

<title>TabStrip Scroll Test</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager runat="server" ID="RadGridScriptManager">

</telerik:RadScriptManager>

<table width="100%" cellpadding="0px" border="1">

<tr>

<td valign="top" align="center" style="width:20%;border:1px solid #EEE;color:#666;">

<div id="leftdiv" class="leftdivtitle">

</div>

Left Contents goes here

</td>

<td valign="top" style="width:20%;color:#EEE;">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlTab">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radBtnBack" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="radBtnSkip" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="radBtnNext" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="radBtnFinish" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radBtnBack">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTab" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radBtnSkip">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTab" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="radBtnBack" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radBtnSave">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTab" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="pnlViewAgreement" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radBtnNext">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlTab" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel runat="server" ID="pnlRightContent" Height="600px" ScrollBars="Auto" Style="position: relative;">

<asp:Panel runat="server" ID="pnlTab">

<asp:HiddenField ID="previousTabHidden" runat="Server" />

<telerik:RadTabStrip ID="radTabStripCompanyRegistration" runat="server" MultiPageID="radMultiPageCompanyRegistration"

AutoPostBack="true" SelectedIndex="0" ScrollChildren="True"

Skin="WebBlue">

<Tabs>

<telerik:RadTab runat="server" Text="Company Info" PageViewID="radPageViewCompanyInfo"

Font-Bold="True" Selected="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Addresses" PageViewID="radPageViewAddresses"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Contacts" PageViewID="radPageViewContacts" Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Company Details" PageViewID="radPageViewCompanyDetails"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Operating Areas" PageViewID="radPageViewOperatingAreas"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Credit Details" PageViewID="radPageViewCreditDetails"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Agreement" PageViewID="radPageViewAgreement"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Insurance" PageViewID="radPageViewInsurance"

Font-Bold="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Summary" PageViewID="radPageViewSummary" Font-Bold="True">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="radMultiPageCompanyRegistration" SelectedIndex="0"

Width="100%">

<telerik:RadPageView runat="server" ID="radPageViewCompanyInfo" BorderColor="#666666"

BorderWidth="1px" Height="500px" Selected="true">

<asp:Panel runat="server" ID="pnlCompanyInfo" CssClass="companyregpanel">

<%-- <uc1:CompanyInfo ID="CompanyInfo" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewAddresses" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlAddresses" CssClass="companyregpanel">

<%--<uc2:addresses id="Addresses" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewContacts" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlContacts" CssClass="companyregpanel">

<%--<uc3:contacts id="Contacts1" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewCompanyDetails" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlCompanyDetails" CssClass="companyregpanel">

<%-- <uc4:companydetails id="CompanyDetails1" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewOperatingAreas" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlOperatingAreas" CssClass="companyregpanel">

<%-- <uc5:operatingareas id="OperatingAreas1" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewCreditDetails" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlCreditDetails" CssClass="companyregpanel">

<%-- <uc6:creditdetails id="CreditDetails1" runat="server" />--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewAgreement" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlViewAgreement" CssClass="companyregpanel">

<%-- <uc7:agreement id="Agreement1" runat="server"></uc7:agreement>--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewInsurance" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlInsurance" CssClass="companyregpanel">

<%-- <uc8:insurance id="Insurance1" runat="server"></uc8:insurance>--%>

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="radPageViewSummary" BorderColor="#666666"

BorderWidth="1px" Height="500px">

<asp:Panel runat="server" ID="pnlSummary" CssClass="companyregpanel" Height="460px"

ScrollBars="Vertical">

<%-- <uc9:summary id="Summary1" runat="server"></uc9:summary>--%>

</asp:Panel>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

<hr style="color: #333; clear: both;" />

<table>

<tr>

<td align="center">

<telerik:RadButton ID="radBtnComment" runat="server" Text="View/Add Comments" ButtonType="LinkButton"

AutoPostBack="False" BackColor="White" BorderColor="White" UseSubmitBehavior="false"

ForeColor="#5b7993">

</telerik:RadButton>

</td>

<td>

</td>

<td>

<telerik:RadButton ID="radBtnBack" runat="server" Text="Back" Width="50px" Visible="false"

>

</telerik:RadButton>

</td>

<td>

</td>

<td>

<telerik:RadButton ID="radBtnSkip" runat="server" Text="Skip" Width="50px" >

</telerik:RadButton>

</td>

<td>

</td>

<td>

<telerik:RadButton ID="radBtnSave" runat="server" Text="Validate" Width="50px" >

</telerik:RadButton>

</td>

<td>

</td>

<td>

<telerik:RadButton ID="radBtnNext" runat="server" Text="Next" Width="50px"

UseSubmitBehavior="False">

</telerik:RadButton>

</td>

<td>

</td>

<td>

<telerik:RadButton ID="radBtnFinish" runat="server" Text="Finish" Width="50px" UseSubmitBehavior="False"

Visible="False">

</telerik:RadButton>

</td>

<td>

<asp:HiddenField ID="hdnCompanyId" runat="server" Value="0" />

</td>

</tr>

</table>

<div id="CompRegDiv" class="bigModule" visible="false" runat="server">

<table id="tblError" runat="server" visible="true">

<tr>

<td colspan="5">

<div class="bigModuleBottom">

<asp:Label ID="lblWarning" runat="server" Text="" CssClass="requiredsign"></asp:Label>

</div>

</td>

</tr>

</table>

</div>

</asp:Panel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">

<Windows>

<telerik:RadWindow ID="CompanyCommentWindow" runat="server" Title="Company Comments"

Width="765" Height="500" Behaviors="close" />

</Windows>

</telerik:RadWindowManager>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 01 Mar 2011, 03:58 PM

TabStripScrollingWidth.zip

Hello Neha,

The problem comes from the tables you're using for layout. By default a table cell is resized by its content and RadTabStrip can't size its scrolling container properly. I'm attaching similar example, but using RadSplitter for layout.

Regards,
Kamen Bundev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!