Tabs not visible if scrolling is enabled

5 posts, 0 answers
  1. Francois MARTIN
    Francois MARTIN avatar
    44 posts
    Member since:
    Aug 2005

    Posted 05 Dec 2008 Link to this post

    Well I'm struggling with a silly issue: a very simple form contains a tabstrip. If scrolling si enabled, then the tabs just dosn't show up!

    Is this a bug or am I missing something simple ??? I've put together a test page that is as simple as possible that reproduces the problem. Can anyone tell me what's going on please ?

    Here is the page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Page sans titre</title> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="ScriptManager1" runat="server"   
            EnableTheming="True" OutputCompression="AutoDetect">  
        </telerik:RadScriptManager> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
                    <UpdatedControls> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <div> 
        <table width="100%">  
            <tr> 
                <td align="center">  
                    <table> 
                        <tr> 
                            <td> 
                                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="7"   
                                    Skin="Inox" Width="600px" ScrollButtonsPosition="Middle"   
                                    ScrollChildren="True">  
                                    <Tabs> 
                                        <telerik:RadTab runat="server" Text="Aspects physiques">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Aptitudes">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Projet">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Attentes">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Vie quotidienne">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Fiche Médicale">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Passeport">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Fiche Médicale" Selected="True">  
                                        </telerik:RadTab> 
                                        <telerik:RadTab runat="server" Text="Passeport">  
                                        </telerik:RadTab> 
                                    </Tabs> 
                                </telerik:RadTabStrip> 
                                <telerik:RadEditor ID="RadEditor1" runat="server" Skin="WebBlue" ToolsFile="~/Xml/EditTools.xml" 
                                    Language="fr-FR" EnableResize="False" Enabled="False">  
                                    <Languages> 
                                        <telerik:SpellCheckerLanguage Code="fr-FR" Title="French" /> 
                                    </Languages> 
                                    <Content> 
                                    </Content> 
                                </telerik:RadEditor> 
                            </td> 
                        </tr> 
                    </table> 
                </td> 
            </tr> 
        </table> 
        </div> 
        </form> 
    </body> 
    </html> 
     
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Dec 2008 Link to this post

    Hi Francois,

    This issue is caused by the center alignment of the table cell, so please remove it. You can center the nested table with the following style:

    <table width="100%">        
            <tr>       
                <td>        
                    <table  style="margin: 0 auto">       
                        <tr>       
                            <td>       
                                <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="7"         
                                    Skin="Default" Width="400px" ScrollButtonsPosition="Middle"         
                                    ScrollChildren="True">       
     


    Best wishes,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Francois MARTIN
    Francois MARTIN avatar
    44 posts
    Member since:
    Aug 2005

    Posted 08 Dec 2008 Link to this post

    Thank you bery much, It's working now :)
  5. Herbert
    Herbert avatar
    1 posts
    Member since:
    Aug 2013

    Posted 17 Dec 2014 in reply to Yana Link to this post

    The problem is still there (Post from 2008!) and not limited to tabstrips in tables.
    I have the same effect in a tabstrip, which is on top level directly below page/html.
    If adding the params
    ScrollChildren="true" ScrollButtonsPosition="Middle" PerTabScrolling="True"
    the tabstrip does not show in IE 11 also it does in older versions and in Firefox.
    Do you have new information on the subjects ?
    Thanks
    Herbert
  6. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 22 Dec 2014 Link to this post

    Hi Herbert,

    I have tested with the newest release and everything seems to be fine. Could you send me a sample page and video where I could observe that issue?

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017