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:
This is the code for the aspx page:
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> |
<%@ 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> |