TabStrip with ScrollChildren too wide in Firefox 3

7 posts, 1 answers
  1. mika-xws
    mika-xws avatar
    11 posts
    Member since:
    Feb 2007

    Posted 21 Apr 2009 Link to this post

    Hi Telerik team,

     

    I encountered the same problem as described in thread “Firefox 3, Tabstrip with ScrollChildren inside splitter”: my TabStrip is 10,000 px wide in Firefox 3.0.8. My Telerik DLL version is 2008.3.1314.35.

     

    This value of 10.000 px is set in the CSS definition for  selector '.RadTabStrip .rtsScroll', but FF3 ignores the 'overflow:hidden' defined for the outer HTML elements. I wonder if this can be fixed by altering some CSS definitions. Or must I use the JavaScript workaround you provided in the mentioned thread?

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 21 Apr 2009 Link to this post

    Hello mika-xws,

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

    Sincerely yours,
    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.
  3. mika-xws
    mika-xws avatar
    11 posts
    Member since:
    Feb 2007

    Posted 21 Apr 2009 Link to this post

    OK. Thanks, Paul, for the really fast answer!
  4. mika-xws
    mika-xws avatar
    11 posts
    Member since:
    Feb 2007

    Posted 05 May 2009 Link to this post

    BTW: the same issue happens in IE 8 as well.
  5. mika-xws
    mika-xws avatar
    11 posts
    Member since:
    Feb 2007

    Posted 07 May 2009 Link to this post

    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:

    1 <%@ Page Language="C#" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5 <html xmlns="http://www.w3.org/1999/xhtml">  
    6 <head runat="server">  
    7     <title>Untitled Page</title> 
    8 </head> 
    9 <body> 
    10     <form id="form1" runat="server">  
    11     <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    12     <div id="wrapperPane" style="width: 400px">  
    13         <table> 
    14             <tr> 
    15                 <td id="wrapperCell">  
    16                     <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true" ScrollButtonsPosition="Middle">  
    17                         <Tabs> 
    18                             <telerik:RadTab Text="Testing" /> 
    19                             <telerik:RadTab Text="Testing" /> 
    20                             <telerik:RadTab Text="Testing" /> 
    21                             <telerik:RadTab Text="Testing" /> 
    22                             <telerik:RadTab Text="Testing" /> 
    23                             <telerik:RadTab Text="Testing" /> 
    24                             <telerik:RadTab Text="Testing" /> 
    25                             <telerik:RadTab Text="Testing" /> 
    26                         </Tabs> 
    27                     </telerik:RadTabStrip> 
    28                 </td> 
    29             </tr> 
    30         </table> 
    31     </div> 
    32  
    33     <script type="text/javascript">  
    34         window.onload = function() {  
    35             var wrapperCell = $get('<%=RadTabStrip1.ClientID %>');  
    36             var wrapperPane = $get('wrapperPane');  
    37             wrapperCell.style.width = (parseInt(wrapperPane.style.width) - 4) + "px";  
    38         }  
    39     </script> 
    40  
    41     </form> 
    42 </body> 
    43 </html> 
    44  

    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]

  6. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 11 May 2009 Link to this post

    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.
  7. mika-xws
    mika-xws avatar
    11 posts
    Member since:
    Feb 2007

    Posted 12 May 2009 Link to this post

    O.K., I see! Thank you very much!
Back to Top