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

[Solved] ASCX with tabstrip rendering issue

1 Answer 142 Views

TabStrip

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

dhuss asked on 17 Apr 2013, 07:47 PM

TabFull.png

TabShort.png

I have a single aspx page that has a tabstrip and a ascx control with a tabstrip contained in it. This page is used in my custom skin to see how the controls look. When I use the following DOCTYPE the screen renders different for the ASCX tabstrip control:

<!DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.0 Transitional//EN">: the controls render fine. the ASCX control spans the entire page which is the behavior I want. Notice that the first tab text is not truncated. See attached file TabFull.png

<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">: the control renders different. The ASCX control only covers part of the screen and the first tab text is truncated. See attached file TabShort.png

Does anyone have any idea of why this is happening?

ASCX code:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TabControl.ascx.vb"

Inherits="CustomSkin_Hew.TabControl" %>

<telerik:RadTabStrip ID="RadAjaxTabStrip1" runat="server" AutoPostBack="false" Align="Left"

Orientation="HorizontalTop" ShowBaseLine="true" Width="100%">

<Tabs>

<telerik:RadTab Text="Page1 Long Title" runat="server" Width="20%">

</telerik:RadTab>

<telerik:RadTab Text="Page2" runat="server" Width="20%">

</telerik:RadTab>

<telerik:RadTab Text="Page3" runat="server" Width="20%">

</telerik:RadTab>

<telerik:RadTab Text="Page4" runat="server" Width="20%">

</telerik:RadTab>

<telerik:RadTab Text="Page5" runat="server" Width="19%">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

ASPX code:

<tr>

<td>

<asp:Label ID="Label2" runat="server" Text="RadTabStrip"></asp:Label>

</td>

</tr>

<tr>

<td>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="3" Align="left"

Orientation="HorizontalTop" ShowBaseLine="true" TabIndex="-1">

<Tabs>

<telerik:RadTab runat="server" Text="Root RadTab1">

<Tabs>

<telerik:RadTab runat="server" Text="Child RadTab 1">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab2">

<Tabs>

<telerik:RadTab runat="server" Text="Child RadTab 2">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab3">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Root RadTab4" Selected="True">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<rad:TabControl runat="server" ID="objTab"></rad:TabControl>

</td>

</tr>

1 Answer, 1 is accepted

answered on 18 Apr 2013, 02:09 PM

Hello, Dennis.

The first doctype does not force the page to be in standards mode and what you are seeing is not accurate.

The second doctype does force the page to be in standards mode and you are seeing what you are supposed to see.

The other question does remain -- why there are two version? The explanation is rather boring, but does have to do with what exactly is 100% in standards and non standards mode.

A very easy solution is to set align attribute to justify:

<telerik:RadTabStrip runat="server" Width="100%" Align="Justify">

<Tabs>

<telerik:RadTab Text="Item 1" />

<telerik:RadTab Text="Item 2" />

<telerik:RadTab Text="Item 3" />

<telerik:RadTab Text="Item 4" />

<telerik:RadTab Text="Item 5" />

</Tabs>

</telerik:RadTabStrip>

Regards,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.