[Solved] Firefox 3, Tabstrip with ScrollChildren inside splitter

[mzn developer]

I'm using a RadTabstrip with ScrollChildren enabled. I have it inside a header area created by using a RadSplitter.  I also have the tabstrip inside a table that's used to layout the different parts of the header.  A bare bones sample of the code is below.

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Horizontal"

BorderSize="0" ResizeMode="EndPane">

<telerik:RadPane ID="rpTop" Height="80px" runat="server">

<table width="100%">

<tr>

<td style="white-space: nowrap">

This is the left side of the header

</td>

<td width="100%" style="text-align: right; white-space: nowrap">

This is the right side of the header

</td>

</tr>

<tr>

<td colspan="2">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" >

<Tabs>

<telerik:RadTab text="Testing"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</td>

</tr>

</table>

</telerik:RadPane>

<telerik:RadPane ID="rpContents" Height="100%" Width="100%" runat="server" Scrolling="none">

Here is my content

</telerik:RadPane>          </telerik:RadSplitter>

The issue I'm running into is that with ScrollChildren enabled, the width of the tabstrip is calculated incorrectly in Firefox 3 and it stretches my table out to almost 10,000 px wide.  In FF2 and IE7 it works fine and when I turn ScrollChildren off then everything works correctly in FF3.  Any ideas on how to fix this?

[Alex Gyoshev]

Hello mzn developer,

The attached page contains a work-around for this problem. It consists in setting the width of the TabStrip dynamically on load / resize of the page.

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[mzn developer]

Thanks!  That fixed it.  I did have to make one small change. 

Instead of using window.onresize I had to tie it to the Splitter OnClientResized event.  For some reason the window.onresize event in FF3 was causing incorrect width readings sometimes so there were times it would not set the width correctly on a resize (causing either a gap on the right side or part of the header to be out of viewable range).
I also used the Splitter OnClientLoaded event to call it initially instead of the window.onload.  In the code below I'm only doing the resize for Firefox 3 and above since the resize works correctly in the other browsers I tested, just to cut down the chance of an incorrect width set by the js.

<telerik:RadSplitter ID="RadSplitter1" runat="server"       Height="100%" Width="100%" Orientation="Horizontal"       OnClientResized="ResizeMenu" OnClientLoaded="ResizeMenu"

BorderSize="0" ResizeMode="EndPane" VisibleDuringInit="false">

function ResizeMenu(splitter, args)

{

//Only perform the manual resize for firefox 3 or greater

if (navigator.userAgent.indexOf('Firefox/') > 0 &&          navigator.userAgent.substr(navigator.userAgent.indexOf('Firefox/') + 8, 1) > 2)

{

var wrapperCell = $get('RadTabStrip1');

wrapperCell.style.width =              ($get('<%=rpTop.ClientID %>').clientWidth - 4) + 'px';

}

}

Thanks again!

[mika-xws]

Hi Alex,
I encountered the same problem as mzn developer (TabStrip is 10,000 px wide in Firefox 3.0.8). This value is set in the CSS definition for  selector '.RadTabStrip .rtsScroll', but FF3 ignores the 'overflow:hidden' defined for the outer HTML elements. Can this be fixed by altering some CSS definitions, or do you regard this as a bug in Firefox?

[Paul]

Hi mika-xws,

The given solution is the only one we have for the moment.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.