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

Tabs not visible if scrolling is enabled

4 Answers 67 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Francois MARTIN
Top achievements
Rank 2
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

Sort by
0
Yana
Telerik team
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.
0
Francois MARTIN
Top achievements
Rank 2
answered on 08 Dec 2008, 12:16 PM
Thank you bery much, It's working now :)
0
Herbert
Top achievements
Rank 1
answered on 17 Dec 2014, 06:03 PM
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
0
Peter Filipov
Telerik team
answered on 22 Dec 2014, 12:16 PM
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.

 
Tags
TabStrip
Asked by
Francois MARTIN
Top achievements
Rank 2
Answers by
Yana
Telerik team
Francois MARTIN
Top achievements
Rank 2
Herbert
Top achievements
Rank 1
Peter Filipov
Telerik team
Share this question
or