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

TabStrip with ScrollChildren too wide in Firefox 3

6 Answers 111 Views

TabStrip

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

6 Answers, 1 is accepted

answered on 07 May 2009, 01:52 PM

I have to pick up this thread again because the workaround provided by Telerik in thread “Firefox 3, Tabstrip with ScrollChildren inside splitter” doesn't work correctly in my case: the scroll buttons are not visible by default in IE 8 and Firefox 3; they only appear if you resize the window.

Here's an example. It's a reduced version of the workaround demo page by Alex from the thread mentioned above, in which I omitted the RadSplitter:

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                <div id="wrapperPane" style="width: 400px">  
        
                    <table> 
        
                        <tr> 
        
                            <td id="wrapperCell">  
        
                                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" ScrollButtonsPosition="Middle">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                        <telerik:RadTab Text="Testing" /> 
        
                                    </Tabs> 
        
                                </telerik:RadTabStrip> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </div> 
        
                <script type="text/javascript">  
        
                    window.onload = function() {  
        
                        var wrapperCell = $get('<%=RadTabStrip1.ClientID %>');  
        
                        var wrapperPane = $get('wrapperPane');  
        
                        wrapperCell.style.width = (parseInt(wrapperPane.style.width) - 4) + "px";  
        
                    }  
        
                </script> 
        
                </form> 
        
            </body> 
        
            </html>

If you open the page in IE 8 or FF 3, the width of the TabStrip is OK (400 px), but there are no scroll buttons unless you resize the page! IE 7 is OK.

Am I doing sth wrong?

[EDIT]
Putting the window.onload functionality into an OnClientLoad handler for the TabStrip didn't help either.
[/EDIT]

Accepted

answered on 11 May 2009, 06:42 AM

Hello mika-xws,

Here's your modified code snippet that works as expected.

    
            <form id="form1" runat="server">  
        
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">  
        
            </telerik:RadScriptManager> 
        
            <div id="wrapperPane" style="width: 400px">  
        
            <table> 
        
                <tr> 
        
                <td id="wrapperCell">  
        
                    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" ScrollButtonsPosition="Middle">  
        
                    <Tabs> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                        <telerik:RadTab Text="Testing" /> 
        
                    </Tabs> 
        
                    </telerik:RadTabStrip> 
        
                </td> 
        
                </tr> 
        
            </table> 
        
            </div> 
        
            <script type="text/javascript">  
        
            function pageLoad() {  
        
                var tabstrip = $find('<%= RadTabStrip1.ClientID %>');  
        
                var wrapperPane = $get('wrapperPane');  
        
                tabstrip.get_element().style.width = (parseInt(wrapperPane.style.width) - 4) + "px";  
        
                tabstrip.repaint();  
        
            }     
        
            </script> 
        
            </form>

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

TabStrip with ScrollChildren too wide in Firefox 3

6 Answers, 1 is accepted