RadTabStrip Align="Justify" Quirk

3 posts, 0 answers
  1. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 29 Oct 2009 Link to this post

    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. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 04 Nov 2009 Link to this post

    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.
  3. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 04 Nov 2009 Link to this post

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