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

[Solved] RadTabStrip Align="Justify" Quirk

2 Answers 144 Views

TabStrip

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

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>

[Solved] RadTabStrip Align=&quot;Justify&quot; Quirk

2 Answers, 1 is accepted

[Solved] RadTabStrip Align="Justify" Quirk