TabStrip tabs are not centered

1 Answer 47 Views
TabStrip
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 25 Aug 2023, 02:40 PM
 

I have a tab strip (I need it to be in Lightweight mode) :

 <telerik:RadTabStrip width="100%"  Align="Center" Skin="Default" 
                                    Orientation="HorizontalTop"  RenderMode="Lightweight"

Tabs are centered to the left

 Any ideas?

 


                                    

Rumen
Telerik team
commented on 29 Aug 2023, 08:19 AM

Hi David,

I tested the reported scenario with the following tabstrip configuration

 <telerik:RadTabStrip width="100%"  Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop"  RenderMode="Lightweight">
     <Tabs>
         <telerik:RadTab Text="Tab 1"></telerik:RadTab>
         <telerik:RadTab Text="Tab 2"></telerik:RadTab>
         <telerik:RadTab Text="Tab 3"></telerik:RadTab>
     </Tabs>
 </telerik:RadTabStrip>

and the result is

If this is the result you are expecting and looking for, please make sure that there isn't any CSS on the page that overrides this rendering. You can check the suggestions in this blog post: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools (See the Applied Styles).

If you need further assistance, please provide a fiddler jam capture and the aspx/codebehind/masterpage/css files for review and recreation of the problem. Thank you!

1 Answer, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 29 Aug 2023, 06:01 PM

Seems if more than one strip present, both of them have to be 'Lightweight'.

Is it true?

 

<%@ Page Language="vb" AutoEventWireup="false"%>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml/">

    <body>

    <form id="form1" runat="server">  

       <telerik:RadScriptManager runat="server" ID="RadScriptManager1" AsyncPostBackTimeout="1000000"/>

          <telerik:RadTabStrip width="100%"  Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop"  RenderMode="Lightweight">
             <Tabs>
                 <telerik:RadTab Text="Tab 1"></telerik:RadTab>
                 <telerik:RadTab Text="Tab 2"></telerik:RadTab>
                 <telerik:RadTab Text="Tab 3"></telerik:RadTab>
             </Tabs>
         </telerik:RadTabStrip>

         <telerik:RadTabStrip width="100%"  Align="Center" Skin="Default" runat="server" Orientation="HorizontalTop">
             <Tabs>
                 <telerik:RadTab Text="Tab 1"></telerik:RadTab>
                 <telerik:RadTab Text="Tab 2"></telerik:RadTab>
                 <telerik:RadTab Text="Tab 3"></telerik:RadTab>
             </Tabs>
         </telerik:RadTabStrip>

 </form>

</body>

</html>

                 
Rumen
Telerik team
commented on 30 Aug 2023, 06:56 AM

Yes, it is a prerequisite to have all Telerik UI for ASP.NET AJAX controls on the page with the same render mode, otherwise, you will fall into the case of mixed stylesheet rendering problems discussed in these articles:

David
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 30 Aug 2023, 09:06 AM

i see.

Thank you

Tags
TabStrip
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or