ASCX with tabstrip rendering issue

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

    Posted 17 Apr 2013 Link to this post

    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>


  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 18 Apr 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top