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

Firefox 3, Tabstrip with ScrollChildren inside splitter

4 Answers 109 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
mzn developer
Top achievements
Rank 1
mzn developer asked on 08 Sep 2008, 09:47 PM
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?

4 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 09 Sep 2008, 01:42 PM
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.
0
mzn developer
Top achievements
Rank 1
answered on 09 Sep 2008, 03:45 PM
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!
0
mika-xws
Top achievements
Rank 1
answered on 14 Apr 2009, 03:04 PM
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?
0
Paul
Telerik team
answered on 21 Apr 2009, 10:42 AM
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.
Tags
TabStrip
Asked by
mzn developer
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
mzn developer
Top achievements
Rank 1
mika-xws
Top achievements
Rank 1
Paul
Telerik team
Share this question
or