This is a migrated thread and some comments may be shown as answers.

RadTabStrip ScrollChildren width BUG

1 Answer 182 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 24 Jun 2012, 10:24 PM
Hello,
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;">
    <Tabs>
        <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" />
    </Tabs>
</telerik:RadTabStrip>

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)

1 Answer, 1 is accepted

Sort by
0
Accepted
Kate
Telerik team
answered on 28 Jun 2012, 01:54 PM
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,
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.
Tags
TabStrip
Asked by
Gary
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or