ScrollChildren changes width of TabStrip

[Eric]

I have a tabstrip and a multipage view that are dynamically populated.  This works fine when scrollChildren is by default set to false, the tabstrip wraps (it shows as two rows) and fits in side of the table and divs that contain it (as this is content page for a master page). When I change the mode to scroll children as I only want one row of tabs, that are scrollable, the tabstrip shows up as longer than the parent table and divs, and the scroll bar is off the page.

Any solutions?
Below is the sample code. The master page it is in is just the standard default masterpage.

Thanks!

 

 

 

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm1.aspx.vb" Inherits="_3POC.WebForm1"  %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">


    <link href="Styles/styles.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 7]> <style type="text/css">@import "ie6.css";</style><![endif]-->




</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" >

    <table><tr>
    <td style="vertical-align:top;">
               <telerik:RadDockZone ID="RadDockZone2" BorderStyle="None" runat="server"
            Orientation="Vertical" Width="100%" height="100%" MinWidth="50px" minHeight="100px" FitDocks="False"
            Skin="Office2007" HighlightedCssClass="dockzone">
                        <telerik:RadDock ID="RadDock1" runat="server" Title="Tools" Width="275px" EnableAnimation="true"
                            EnableRoundedCorners="true" Resizable="true" Skin="Office2007">
                            <ContentTemplate>
                                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" >
                <CollapseAnimation Type="OutQuart" Duration="200"></CollapseAnimation>
                <Items>
                    <telerik:RadPanelItem Text="Patient Info" Expanded="True">
                        <ContentTemplate>
                        MRN: 1234s <br />
                        Patient Name: Eric Dalnas <br />
                        Patient age: 34 <br />
                        </ContentTemplate>

                    </telerik:RadPanelItem>
                     <telerik:RadPanelItem Text="Notes">
                        <Items>
                            <telerik:RadPanelItem Text="My Notes"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Notes List"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Notes"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Archive"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Future Use 1">
                        <Items>
                            <telerik:RadPanelItem Text="My Contacts"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Address Cards"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Phone List"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Contacts"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Future Use 2">
                        <Items>
                            <telerik:RadPanelItem Text="My Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Active Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Completed Tasks"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>

                    <telerik:RadPanelItem Text="Future Use 4">
                        <Items>
                            <telerik:RadPanelItem Text="My Client.Net"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Profile"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Support Tickets"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Licenses"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
                <ExpandAnimation Type="OutQuart" Duration="200"></ExpandAnimation>
            </telerik:RadPanelBar>
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>


        </td>
    <td style="border-style:none; vertical-align:top;">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
        <ContentTemplate>

       <telerik:RadTabStrip ID="tabMain" runat="server"
                MultiPageID="multiPageMain" Skin="Office2007"
            AutoPostBack="True" ></telerik:RadTabStrip>
     <telerik:RadMultiPage ID="multiPageMain" runat="server"
            RenderSelectedPageOnly="True" >
        </telerik:RadMultiPage>

        </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tabMain" />
        </Triggers>
        </asp:UpdatePanel>
    </td></tr>

    </table>













        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        </asp:ScriptManagerProxy>
        <asp:UpdateProgress id="UpdateMessagesProgress" DynamicLayout="false" runat="server" visible="true" DisplayAfter="250">
 <ProgressTemplate>
 <div id="progressBackgroundFilter"></div>
        <div id="processMessage" style=" text-align:center;"> Processing...<br /><br />
             <img alt="Loading" src="Images/busy.gif" />
        </div>

 </ProgressTemplate>
 </asp:UpdateProgress>


    </asp:Content>

[Eric]

No replies at all? Lame, where else can I go for help. I'm on a trial.

[Helen]

Hello Eric,

What is the exact browser that you use?
Note that in some browsers like FF, when no width is set, tables are automatically resized. In such cases RadTabStrip fails to resize properly.

Kind regards,
Helen
the Telerik team

[Eric]

I am running IE9.

After some further testing I have found that with scrollchildren=true, it doesn't render how I expect unless it is in quirks mode, IE7 - 9 rendering modes all have the tabstrip run off the screen. Attached below are two screenshots. The page is exactly the same for each screenshot, the only difference is the rendering mode of IE.

[Helen]

Hi Eric,

The only solution I can think of is to use divs instead of a table. See a sample code below:

<div style="position:relative">
<div>
<asp:ScriptManager ID="Manager1" runat="server"></asp:ScriptManager>
       <telerik:RadDockZone ID="RadDockZone2" BorderStyle="None" runat="server"
    Orientation="Vertical" Width="100%" height="100%" MinWidth="50px" minHeight="100px" FitDocks="False"
    Skin="Office2007" HighlightedCssClass="dockzone">
        <telerik:RadDock ID="RadDock1" runat="server" Title="Tools" Width="275px" EnableAnimation="true"
            EnableRoundedCorners="true" Resizable="true" Skin="Office2007">
            <ContentTemplate>
            <telerik:RadPanelBar runat="server" ID="RadPanelBar1" >
    <CollapseAnimation Type="OutQuart" Duration="200"></CollapseAnimation>
    <Items>
        <telerik:RadPanelItem Text="Patient Info" Expanded="True">
        <ContentTemplate>
        MRN: 1234s <br />
        Patient Name: Eric Dalnas <br />
        Patient age: 34 <br />
        </ContentTemplate>

        </telerik:RadPanelItem>
         <telerik:RadPanelItem Text="Notes">
        <Items>
            <telerik:RadPanelItem Text="My Notes"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Notes List"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Shared Notes"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Archive"></telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Future Use 1">
        <Items>
            <telerik:RadPanelItem Text="My Contacts"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Address Cards"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Phone List"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Shared Contacts"></telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Future Use 2">
        <Items>
            <telerik:RadPanelItem Text="My Tasks"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Shared Tasks"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Active Tasks"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Completed Tasks"></telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>

        <telerik:RadPanelItem Text="Future Use 4">
        <Items>
            <telerik:RadPanelItem Text="My Client.Net"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="My Profile"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="My Support Tickets"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="My Licenses"></telerik:RadPanelItem>
        </Items>
        </telerik:RadPanelItem>
    </Items>
    <ExpandAnimation Type="OutQuart" Duration="200"></ExpandAnimation>
    </telerik:RadPanelBar>
            </ContentTemplate>
        </telerik:RadDock>
        </telerik:RadDockZone>
</div>
<div style="position:absolute; left:300px; right:200px; height:100%">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
<ContentTemplate>

<telerik:RadTabStrip ID="tabMain" runat="server"
    MultiPageID="multiPageMain" Skin="Default"
    AutoPostBack="True" ScrollChildren="true"></telerik:RadTabStrip>
<telerik:RadMultiPage ID="multiPageMain" runat="server"
    RenderSelectedPageOnly="True" >
</telerik:RadMultiPage>

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tabMain" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>

Greetings,
Helen
the Telerik team

[Helen]

Hello Eric,

It is just a follow up. Another possible solution is the following:

<table style="width: 100%; position: relative;">
    <tr>
    <td style="vertical-align:top; width: 300px">
        <asp:ScriptManager ID="Manager1" runat="server"></asp:ScriptManager>
               <telerik:RadDockZone ID="RadDockZone2" BorderStyle="None" runat="server"
            Orientation="Vertical" Width="100%" height="100%" MinWidth="50px" minHeight="100px" FitDocks="False"
            Skin="Office2007" HighlightedCssClass="dockzone">
                        <telerik:RadDock ID="RadDock1" runat="server" Title="Tools" Width="275px" EnableAnimation="true"
                            EnableRoundedCorners="true" Resizable="true" Skin="Office2007">
                            <ContentTemplate>
                                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" >
                <CollapseAnimation Type="OutQuart" Duration="200"></CollapseAnimation>
                <Items>
                    <telerik:RadPanelItem Text="Patient Info" Expanded="True">
                        <ContentTemplate>
                        MRN: 1234s <br />
                        Patient Name: Eric Dalnas <br />
                        Patient age: 34 <br />
                        </ContentTemplate>

                    </telerik:RadPanelItem>
                     <telerik:RadPanelItem Text="Notes">
                        <Items>
                            <telerik:RadPanelItem Text="My Notes"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Notes List"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Notes"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Archive"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Future Use 1">
                        <Items>
                            <telerik:RadPanelItem Text="My Contacts"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Address Cards"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Phone List"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Contacts"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Future Use 2">
                        <Items>
                            <telerik:RadPanelItem Text="My Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Shared Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Active Tasks"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="Completed Tasks"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>

                    <telerik:RadPanelItem Text="Future Use 4">
                        <Items>
                            <telerik:RadPanelItem Text="My Client.Net"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Profile"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Support Tickets"></telerik:RadPanelItem>
                            <telerik:RadPanelItem Text="My Licenses"></telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
                <ExpandAnimation Type="OutQuart" Duration="200"></ExpandAnimation>
            </telerik:RadPanelBar>
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>


        </td>
    <td style="border-style:none; vertical-align:top; position: relative;">
        <div style="position: absolute; height: 100%; width: 100%;">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
        <ContentTemplate>

       <telerik:RadTabStrip ID="tabMain" runat="server"
                MultiPageID="multiPageMain" Skin="Default"
            AutoPostBack="True" ScrollChildren="true"></telerik:RadTabStrip>
     <telerik:RadMultiPage ID="multiPageMain" runat="server"
            RenderSelectedPageOnly="True" >
        </telerik:RadMultiPage>

        </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tabMain" />
        </Triggers>
        </asp:UpdatePanel>
        </div>
    </td>
    </tr>

    </table>

Hope it helps.

Regards,
Helen
the Telerik team

[Eric]

I appreciate the help but so far those changes still don't render well.

Either I'm going to have to hard code the width or I'll have to set it in JS.

Is there a way to change the tabstrip width via JS?

Thanks
Eric

[Helen]

Hi Eric,

Probably you will find helpful the following forum post:

http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/set-tab-width-on-client-side.aspx

Kind regards,
Helen
the Telerik team

[Giuseppe]

Hi,

Is there a suitable solution to this issue yet?

We are placing the tabstrip within SharePoint (a table hungry solution at the best of times).  When we enable the ScrollChildren and then dynamically increase the number of tabs, the tab strip continues to grow but does not actually expand the page width, therefore pushing the new tabs off the right side of the page.

I have search the t'internet and have seen many comments about the issue being down to the control being contained within a table cell somewhere in the DOM.  Obviously I do not have the luxury of being able to change the layout as the solution is SharePoint based.

The width of the tab strip is 100% (as it is required to fill its container - which in turn expands to will the available width of the page).

Any help would be greatly appreciated.

Btw: We are using the latest 2012 Q2 version of the ASP.NET Ajax controls.


Many thanks


Carl Howarth
PSP IT Design & Development

[Kate]

Hello Giuseppe,

As far as I can understand your issue, the scrollbars do not appear on your page when you set the ScrollChildren="true" property while the issue that Eric describes is that the last tab falls on the second when tabs are being added at runtime. However, to be able to help you out I would like to ask you for some more information on your scenario. For instance sending us a support ticket where you can attach a simplified runnable project demonstrating the issue would be indeed very helpful. Thus we can test the issue locally and help you out in your particular case. I would also like to ask you to clarify the version of the Telerik controls that you are using.  

All the best,
Kate
the Telerik team