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

RadTabStrip Align="Justify" Quirk

2 Answers 55 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
dhuss
Top achievements
Rank 1
dhuss asked on 29 Oct 2009, 10:15 PM
I have found when a tabstrip is created in either an ascx or in the parent aspx page and placed in a table, the tabstrip has a shifting effect to the right. Both the text and tab will shift to the right. If the same is not in a table, everything works okay. 

 This is the code for the ascx:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="radTabs.ascx.vb" Inherits="AjaxLoadingStatusPanel.radTabs" %> 
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Align="Justify" 
    AutoPostBack="false" Orientation="HorizontalTop" Skin="Forest">  
    <Tabs> 
        <telerik:RadTab Text="ASCX_Page1" runat="server">  
        </telerik:RadTab> 
        <telerik:RadTab Text="ASCX_Page2" runat="server">  
        </telerik:RadTab> 
        <telerik:RadTab Text="ASCX_Page3" runat="server">  
        </telerik:RadTab> 
        <telerik:RadTab Text="ASCX_Page4" runat="server">  
        </telerik:RadTab> 
        <telerik:RadTab Text="ASCX_Page5" runat="server">  
        </telerik:RadTab> 
    </Tabs> 
</telerik:RadTabStrip> 
 This is the code for the aspx page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="tabdemo.aspx.vb" Inherits="AjaxLoadingStatusPanel.tabdemo" %> 
 
<%@ Register TagPrefix="rad" TagName="radTabs" Src="~/radTabs.ascx" %> 
<!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></title>  
</head> 
<body> 
    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="radAjaxScriptManager1" runat="server">  
    </telerik:RadScriptManager> 
    <asp:Label ID="label0" runat="server">Do a refresh and watch the tabstrips that are in the tables. You should see the text shift to the right</asp:Label> 
    <br /><br /> 
    <asp:Label ID="label1" runat="server">This ASCX is in a table</asp:Label> 
    <table width="100%">  
        <tr> 
            <td> 
                <rad:radTabs ID="radTabs1" runat="server" /> 
            </td> 
        </tr> 
    </table> 
    <br /> 
    <asp:Label ID="label2" runat="server">This ASCX is in a div tag</asp:Label> 
    <div> 
        <rad:radTabs ID="radTabs2" runat="server" /> 
    </div> 
    <br /> 
    <asp:Label ID="label3" runat="server">This HTML is in a table</asp:Label> 
    <table width="100%">  
        <tr> 
            <td> 
                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Align="Justify" 
                    AutoPostBack="false" Orientation="HorizontalTop" Skin="Forest">  
                    <Tabs> 
                        <telerik:RadTab Text="HTML_Page1" runat="server">  
                        </telerik:RadTab> 
                        <telerik:RadTab Text="HTML_Page2" runat="server">  
                        </telerik:RadTab> 
                        <telerik:RadTab Text="HTML_Page3" runat="server">  
                        </telerik:RadTab> 
                        <telerik:RadTab Text="HTML_Page4" runat="server">  
                        </telerik:RadTab> 
                        <telerik:RadTab Text="HTML_Page5" runat="server">  
                        </telerik:RadTab> 
                    </Tabs> 
                </telerik:RadTabStrip> 
            </td> 
        </tr> 
    </table> 
    <br /> 
    <asp:Label ID="label4" runat="server">This HTML is in a div tag</asp:Label> 
    <div> 
        <telerik:RadTabStrip ID="RadTabStrip2" runat="server" Align="Justify" 
            AutoPostBack="false" Orientation="HorizontalTop" Skin="Forest">  
            <Tabs> 
                <telerik:RadTab Text="HTML_Page1" runat="server">  
                </telerik:RadTab> 
                <telerik:RadTab Text="HTML_Page2" runat="server">  
                </telerik:RadTab> 
                <telerik:RadTab Text="HTML_Page3" runat="server">  
                </telerik:RadTab> 
                <telerik:RadTab Text="HTML_Page4" runat="server">  
                </telerik:RadTab> 
                <telerik:RadTab Text="HTML_Page5" runat="server">  
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
    </div> 
    </form> 
</body> 
</html> 
 

2 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 04 Nov 2009, 01:24 PM
Hi dhuss,

We tested your code snippet using one of the latest internal builds of the control, but we were not able to reproduce the issue (tested under IE7/8, FF3.x and Chrome). Let us know what we are missing.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
dhuss
Top achievements
Rank 1
answered on 04 Nov 2009, 02:46 PM
You are not missing anything. The slide happens very fast, so if you aren't watching the text on the tab, you will miss it. Our business analysts like the text left aligned anyway, so for us, it is not an issue.
Tags
TabStrip
Asked by
dhuss
Top achievements
Rank 1
Answers by
Paul
Telerik team
dhuss
Top achievements
Rank 1
Share this question
or