ScrollChildren changes width of TabStrip

10 posts, 0 answers
  1. Eric
    Eric avatar
    5 posts
    Member since:
    Mar 2011

    Posted 30 Mar 2011 Link to this post

    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>

  2. Eric
    Eric avatar
    5 posts
    Member since:
    Mar 2011

    Posted 01 Apr 2011 Link to this post

    No replies at all? Lame, where else can I go for help. I'm on a trial.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 04 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Eric
    Eric avatar
    5 posts
    Member since:
    Mar 2011

    Posted 04 Apr 2011 Link to this post

    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.
  6. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 06 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 06 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Eric
    Eric avatar
    5 posts
    Member since:
    Mar 2011

    Posted 06 Apr 2011 Link to this post

    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
  9. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 08 Apr 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Giuseppe
    Giuseppe avatar
    3 posts
    Member since:
    Dec 2011

    Posted 14 Sep 2012 Link to this post

    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
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Sep 2012 Link to this post

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