Last Tab in RadTabStrip disappears

16 posts, 0 answers
  1. Alan
    Alan avatar
    6 posts
    Member since:
    Jul 2010

    Posted 21 Jul 2011 Link to this post

    Hello,
        In the web application we are developing using the latest version of RadControls for Ajax, we make use of RadSplitter and RadTabStrip. We would like to format the selected tab's  text as bold so we have tried several approaches to accomplish it, one of them using the tab's SelectedCssClass:
    tab.SelectedCssClass  = "highlightedTab";
      
      
    where
      
      
      .highlightedTab
      {
             font-weight: bold !important;
      }
    The other approach we have tried is to directly modify the CSS class of the selected tab:
    .RadTabStripTop_Office2007 .rtsSelected
     {
            font-weight: bold !important;
     }

    Both of these approaches produce the expected result but are also causing a problem: the last tab in the tabstrip ocassionally disappears. We have looked into the issue using Firebug and we noticed that the inner list of the tabstrip does not update its width when a tab caption is made bold (therefore the tab width increases) and it causes the last tab to be wrapped on the following row because there is not enough room left for it.
    We have tried updating the list's width through client side code every time a tab is selected, but we couldn't get the tabstrip to work properly given that it also has the scroll buttons enabled.
    Please advise us on how to fix this issue.
    Thank you.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 26 Jul 2011 Link to this post

    Hello Alan,

    Please try using repaint() method on OnclientTabSelecting and repaint the RadTabStrip so that the width of the tab is updated. Here is a sample client-side code that you may use:
    <script type="text/javascript">
        function repaintTabStrip(sender, args) {
            var tabstrip = $find("<%=RadTabStrip1.ClientID%>");
            tabstrip.repaint();
        }
    </script>

    Regards,
    Kate
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alan
    Alan avatar
    6 posts
    Member since:
    Jul 2010

    Posted 08 Aug 2011 Link to this post

    Hello again and thank you for your reply.
    I have tried your suggested approach and indeed it resizes the selected tab properly (I believe that happened even without using the repaint() method), but the width of the list of tabs is not updated when a tab is resized, therefore still causing the problem I mentioned above. As a note, the problem does not show in IE, but only in Firefox and Chrome.
    I have managed to isolate the issue in a small test project:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestTabstrip._Default" %>
      
    <%@ Register Assembly="Telerik.Web.UI, Version=2011.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
        Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Test Project</title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <style id="Style1" type="text/css" runat="server">
                html, body, form
                {
                    height: 100%;
                    margin: 0px;
                    padding: 0px;
                    overflow: hidden;
                }
                .paneContainer
                {
                    position: relative;
                }
                .RadTabStripTop_Office2007 .rtsSelected
                {
                    font-weight: bold !important;
                }
            </style>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">
        </telerik:RadScriptManager>
        <telerik:RadCodeBlock runat="server" ID="sb1">
      
            <script type="text/javascript">
                function TabSelecting(sender, eventArgs) {
                    tabStrip = $find('<%= TabStripMain.ClientID %>');
                    //alert("selected tab width before repaint: " + eventArgs.get_tab().get_element().offsetWidth + ' tabstrip width: ' + tabStrip.get_element().offsetWidth + ' inner list: ' + tabStrip.get_childListElement().offsetWidth);
                    tabStrip.repaint();
                }
      
                function TabSelected(sender, eventArgs) {
                    //alert("selected tab width after repaint: " + eventArgs.get_tab().get_element().offsetWidth + ' tabstrip width: ' + tabStrip.get_element().offsetWidth + ' inner list: ' + tabStrip.get_childListElement().offsetWidth);
                }
            </script>
      
        </telerik:RadCodeBlock>
        <div id="ParentDivElement" style="height: 100%;">
            <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
                Orientation="Horizontal" Skin="Office2007" VisibleDuringInit="false">
                <telerik:RadPane ID="ToolbarPane" runat="server" Height="38px" Scrolling="none">
                    <telerik:RadToolBar ID="tbrTop" runat="server" Skin="Office2007" Width="100%" Style="overflow: visible;">
                        <Items>
                            <telerik:RadToolBarButton runat="server" Text="Button">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton runat="server" Text="Button">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton IsSeparator="true">
                            </telerik:RadToolBarButton>
                            <telerik:RadToolBarButton Text="Button">
                            </telerik:RadToolBarButton>
                        </Items>
                    </telerik:RadToolBar>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="TopSplitBar" runat="server" CollapseMode="None">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500" Width="100%">
                    <telerik:RadSplitter ID="MainPaneSplitter" runat="server" Skin="Office2007" LiveResize="false"
                        Width="100%">
                        <telerik:RadPane ID="TabStripPane" runat="server" Height="100%" Scrolling="None"
                            Width="100%" CssClass="paneContainer">
                            <telerik:RadTabStrip ID="TabStripMain" runat="server" Skin="Office2007"
                                SelectedIndex="0" ScrollChildren="true" ScrollButtonsPosition="Right" OnClientTabSelecting="TabSelecting"
                                OnClientTabSelected="TabSelected">
                                <Tabs>
                                    <telerik:RadTab Text="Tab 1">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 2">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 3 Long Text">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 4">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 5 Long Text">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Another Tab">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Another Tab">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Another Tab">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Another Tab">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 6 User Can Edit Text">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Tab 7 User Can Edit Text">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Last Tab User Can Edit Text">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTabStrip>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    On a screen resolution of 1366x768, the last tab wraps on the next row when Tab 3 or Tab 5 is clicked.
    Any suggestions are welcome in order to stop this behaviour.
    Thank you,
    Alan.
     
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 12 Aug 2011 Link to this post

    Hello Alan,

    Thanks for clarifying.

    To workaround this issue you can use the following code snippet and attach it to the OnClientTabSelected event of the RadTabStrip control:
    <telerik:RadTabStrip ID="TabStripMain" runat="server" Skin="Office2007" SelectedIndex="0"
                                ScrollChildren="true" ScrollButtonsPosition="Right"  OnClientTabSelected="TabSelected">

    <telerik:RadCodeBlock runat="server" ID="sb1">
            <script type="text/javascript">
     
                function TabSelected(sender, eventArgs) {
                    sender.repaint();
                    sender._scroller.repaint();
                    if ($telerik.isIE9) {
                        var childList = sender.get_childListElement();
                        var childListWidth = parseInt(childList.style.width);
                        if (!isNaN(childListWidth))
                            childList.style.width = childListWidth + 2 + "px";
                    }
                }          
            </script>
        </telerik:RadCodeBlock>


    Best wishes,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 03 Nov 2011 Link to this post

    Is there a C# version of the
    sender.repaint();
    sender._scroller.repaint();

    I have a radtabstrip within a radpane, and my last tab wraps to the next line when I set scrollchildren to true. I can't figure out how to fix this.
    Thanks.
  7. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 03 Nov 2011 Link to this post

    Is there a C#  code behind version of the
    sender.repaint();
    sender._scroller.repaint();
    ?

    I have a radtabstrip within a radpane, and my last tab wraps to the next line when I set scrollchildren to true. I can't figure out how to fix this.
    Thanks.
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 07 Nov 2011 Link to this post

    Hello R,

    There isn't any C# involved. What repaint does is basically redraw the control with the current data in mind.

    As for the tab breaking, there is a known such bug (in FireFox) that has been addressed in the Beta release of the RadControls.

    Is that the bug you are referring to [happening in FF only]?

    Best wishes,
    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
  9. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 07 Nov 2011 Link to this post

    Hi Ivan,

    No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.

    Thanks.
    <telerik:RadPane ID="RadPane_PreviewSrvy" runat="server" MaxWidth="900" Width="900px">
        <telerik:RadTabStrip ID="RadTabStrip_SecGrp" runat="server" OnTabClick="RadTabStrip_SecGrp_TabClick"
               Width="880px" ScrollChildren="true" ScrollButtonsPosition="Middle">
        </telerik:RadTabStrip>
  10. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 07 Nov 2011 Link to this post

    Hi Ivan,

    No, I am not using Firefox. I am using IE9 Compatibility View. Any ideas how to get around it? It only happens within my RadPane, not outside of it.

    Thanks.
    <telerik:RadPane ID="RadPane_PreviewSrvy" runat="server" MaxWidth="900" Width="900px">
    <telerik:RadTabStrip ID="RadTabStrip_SecGrp" runat="server" OnTabClick="RadTabStrip_SecGrp_TabClick"
    Width="880px" ScrollChildren="true" ScrollButtonsPosition="Middle">
    </telerik:RadTabStrip>
  11. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 10 Nov 2011 Link to this post

    Hi R,

    The root of this issue is the so called precision font rendering that comes with Windows7. What it does is to allow fonts to be rendered with a fraction of the pixel precision, which in terms makes containers with a fraction of the pixel wider.

    The browser API's however are not in line with this. Hence breaking of the tabs. We tried to address this issue, by hard coding few extra pixels of width, but it doesn't work in all cases.

    What you could do is to:

    1) Set height to the TabStrip
    2) Count the number of tabs and extend the width of the containing UL with that many pixels.

    Until the browser API's provide is with a proper methods for getting the dimensions, that's the only solution so far.

    Greetings,
    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
  12. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 14 Nov 2011 Link to this post

    How do I set the width of the containing UL from code behind? The count of my tabs varies so I cannot do this in the stylesheet.
    Thanks.
  13. R
    R avatar
    13 posts
    Member since:
    Sep 2011

    Posted 18 Nov 2011 Link to this post

    Thanks! This worked.
  14. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 18 Nov 2011 Link to this post

    Hi R,

    To count the tabs:
    1) from code behind you need TabStrip.Tabs.Count
    2) from client code you need TabStrip.get_tabs()._array.length

    Both assume that TabStrip is the object referencing the RadTabStrip.

    On the other question, you can't easily set the height of the UL from code behind. You could do it with CSS. Note that each level of tabs sits in a related container e.g. rtsLevel1, rtsLevel2 and so on. So in order to address the root tabs you need a snippet like the following:

    .RadTabStrip_SKIN_NAME .rtsLevel1 .rtsUL {
        height: DESIRED_HEIGHT !important;
    }

    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
  15. Phil
    Phil avatar
    1 posts
    Member since:
    Dec 2011

    Posted 11 Sep 2013 Link to this post

    I had similar issue and I resolved changing the skin from Office2007 to another one but office

    I hope this helps
  16. Hessel
    Hessel avatar
    3 posts
    Member since:
    Aug 2012

    Posted 05 Dec 2013 Link to this post

    Hi Ivan,

    I'm experiencing the same issue. By editing the css in real-time (F12) and adding/changing the width I can see the correct repaint. Can you please give me a javascript snippet that I can insert on the page that needs the RadTabstrip resized, as you suggested? Thanx in advance.

    Best regards,
    Hessel
  17. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 13 Dec 2013 Link to this post

    Hi, all.

    The behaviour described by Hessel is a confirm and valid bug and we've logged it in our Ideas and Feedback portal. You can follow the development of the story here -- http://feedback.telerik.com/Project/108/Feedback/Details/88051-radtabstrip-justified-alignment-and-last-item-issue.

    Regards,
    Ivan Zhekov
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017