RadTabStrip ScrollChildren width BUG

2 posts, 1 answers
  1. Georg
    Georg avatar
    12 posts
    Member since:
    Nov 2009

    Posted 24 Jun 2012 Link to this post

    it seams to be a problem with the radTabStrip on ScrollChildren = true active. There appear to be an internal width issue that breaks the design on browser resize. Here's the scenario:

    I have this in a page:
    <telerik:RadTabStrip  runat="server" ID="radTabStrip" PerTabScrolling="true" ScrollChildren="true" SelectedIndex="0" Width="100%" style="padding-top:2px;">
            <telerik:RadTab runat="server" Text="Customer Details" Value="0" />
            <telerik:RadTab runat="server" Text="Practice Info" Value="1" />
            <telerik:RadTab runat="server" Text="Customer & Case Alerts" Value="6" />
            <telerik:RadTab runat="server" Text="Calls & Notes" Value="2" />
            <telerik:RadTab runat="server" Text="Cases" Value="3" />
            <telerik:RadTab runat="server" Text="Accounting" Value="4" />
            <telerik:RadTab runat="server" Text="Sales" Value="5" />
            <telerik:RadTab runat="server" Text="Attachments" Value="7" />
            <telerik:RadTab runat="server" Text="Education Courses" Value="8" />
            <telerik:RadTab runat="server" Text="Personal Notes" Value="9" />

    Here is the issue i found out:
    Considerring all the tabs i have in the ASPX, when i resize the browser it works as it supposed. That is, the scroll button appears and the tab strips are correctly displayed in one row.
    Now, if you remove the last RadTab ("Personal Notes"). The page loads correctly, but when you try to resize a few pixels the browser, the scroll buttons appear correclty, but the last TAB (and only the last tab) is displayed on a second row..and this is not as it supposed to work.
    My guess is that is not the number of tabs, but the total width of the tabs, because if i dont remove the last tab ("Personal Notes"), but
    insterad i rename the 3rd tab from "Customer & Case Alerts" into "Alerts", the design breaks again, placing the last tab on a second row.

    This behavior was found in IE9 and is working as intended in FF

    I have the last Q2 2012 version and i also attach two snapshots for error 1: (last tab removed) and error 2: (dont remove lat tab, instead rename the 3rd tab to shorter name)
  2. Answer
    Kate avatar
    1898 posts

    Posted 28 Jun 2012 Link to this post

    Hi George,

    I tried replicating the issue that you describe using the attached code and indeed the last tab falls on the second row once I rename any of the existing tabs. You get this appearance since you change the width of a single tab without changing the width of the tabstrip itself. However, using the repaint() method fixes the issue. Please try apply the javascript in my testing page and see if this works for your scenario.

    Kind regards,
    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. Telerik UI for ASP.NET Core is out
Back to Top