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

Tabs not visible if scrolling is enabled

4 Answers 129 Views

TabStrip

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

Francois MARTIN asked on 05 Dec 2008, 02:50 PM

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>

4 Answers, 1 is accepted

answered on 08 Dec 2008, 11:57 AM

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.