Trouble preventing second row with dynamic tabs

[LeBear]

This can be demonstrated on your demo page at

http://demos.telerik.com/aspnet-ajax/window/examples/radwindowandmdi/defaultvb.aspx

If you keep adding windows, which causes new tabs to be added, you end up with a single tab in a second row.  The scroll bars work, but you still end up with the second row.

Can you advise?

Thanks.

[Kate]

Hi LeBear,

Thank you for your feedback.

It seems to be a bug of the RadTabSrtip, therefore I updated your Telerik points. I also forwarded the issue to our development team for further review.

Kind regards,
Kate
the Telerik team

[Steele]

How is this issue going?
Any word to when a work-around/fix will be available?
Thanks,
Steele.

[Kate]

Hello Steele,

The bug is already resolved but it will be available for download after the release of the SP1.

All the best,
Kate
the Telerik team

[Evtim]

Is the fix in the bug included in 2011.2.915.40?
If not, when should we expect it to be available for download?

Thanks

[Kate]

Hi Evtim,

Please try using the Q3 2011 Beta (version 2011.3.1025) of the controls where a very similar issue related to the RadTabStrip is being fixed and let me know if the issue still persist from your side.

Best wishes,
Kate
the Telerik team

[Evtim]

Hi Kate,

I downloaded and used the Q3 version of the telerik's controls but the issue still exists. I have a 1 level tabstrip control with a lot of tabs (their total width is greater than the width of the tabstrip) and the scoll buttons are enabled. The problem exists ONLY IN IE9 - it works for the rest of the browsers!
The issue is that the last tab goes on the second line and when I scroll right I can see that between the last tab on the first line and the scroll buttons there is space (which is probably intended to be for the last tab on the second line). See the screenshots.

As far as I can see the HTML structure of the tabstrip is  <div><div><ul><li><li>...........    Can you suggest me how I can "hack" it and to make it work? I suspect the controls may suffer from a lack of space before rendering so I was wondering if I can manually increase with javascript the width of some of the divs or UL and call .repaint method? Any suggestions?

Regards,
Evtim

[Kate]

Hello Evtim,

I have just tested the issue with the following code and it works just fine from my side in IE9. Please give it a try and let me know if I am missing something in your scenario. In case the issue still persist in your scenario you could try to call the repaint() method of the RadTabStrip control whenever you add a new tab.

function OnClientClicking(sender, args) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            tabStrip.trackChanges();
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text("New Tab");
            tabStrip.get_tabs().add(tab);
            tabStrip.commitChanges();
            args.set_cancel(true);
            //tabStrip.repaint();
        }
    </script>

markup:

<telerik:RadButton runat="server" ID="button1" Text="button1" OnClientClicking="OnClientClicking">
    </telerik:RadButton>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="true">
        <Tabs>
            <telerik:RadTab Text="Tab" runat="server" Value="1">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab1" runat="server" Value="2">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab2" runat="server" Value="3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

 
Best wishes,
Kate
the Telerik team

[Evtim]

Hi Kate,

Thanks for your suggestion. I doesn't work for me though. Repainting doesn't solve the problem. What I did was after the rendering of the control, I increase the width of the UL element with 2px with javascript and this hack solves the problem.

Regards,
Evtim