Skin-problem with sub tabs (2009 Q1)

[Morten]

Hi,

 I have a problem with the skin on sub-tabs on a RadTabStrip. The sub-items have no skin and it is impossible to see which of the sub-tabs are selected.

The same problem can be seen on this page:

http://demos.telerik.com/aspnet-ajax/tabstrip/examples/serverside/serverevents/defaultcs.aspx

I also created a small example showing the problem

<telerik:RadTabStrip ID="RadTabStrip11111" runat="server" EnableAjaxSkinRendering="true" Skin="Vista" CausesValidation="false" SelectedIndex="0" >

      <Tabs>

        <telerik:RadTab Text="aaa">

          <Tabs>

            <telerik:RadTab Text="Sub 1"></telerik:RadTab>

            <telerik:RadTab Text="Sub 2"></telerik:RadTab>

          </Tabs>

        </telerik:RadTab>

        <telerik:RadTab Text="bbb"></telerik:RadTab>

      </Tabs>

    </telerik:RadTabStrip>

 

(Version: 2009.1.408.20)

[Alex Gyoshev]

Hello Morten,

The lack of heavy styling on the sub-items is rather "by design"; the selected states problem, however, is a bug that we fixed yesterday - you can check that in the latest internal build.

The intent of the design can be observed best with the Office2007 skin on the same example.

Greetings,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Hrushikesh Mokashi]

Hi,

I have the same skin problem with sub tabs(209 Q1)
I have also applied the latest internal build and change the skin to 'Office2007'.
But it is not working.
Still it showing link in  sub tabs.

How can i solve this problem?

[Paul]

Hello Hrushikesh,

As already mentioned, this is the new look of the Outlook skin introduced with Q1 2009 release. Please refer to the following resources for details on the matter.

RadControls for ASP.NET AJAX receive a major face-lift!
Using pre-Q1 2009 skins with Q1 2009!
All RadControls Q3 2008 Skins Are Now Compatible with the Q1 2009 Release

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.

[Joel]

Thank you for your links to the articles.  I feel that the new methodology is of great benefit and will help in many areas.

I believe however that being unable to skin a tab and only have a basic html link for it when you have hierarchical tabs is a problem.  I had 10 users try an existing application that used hierarchical tabs, some internal users, some external users.  All 10 felt it was "broken" and the subtabs were not tabs, just links and they did not know what to do with it.

If there is not going to be support in the default skins for heirarchical tabs, that is certainly Telerik's prerogative. Could someone please post an example though of how we can create a custom skins to make a tab appear as a tab and not simply an unformated html link that shows up "near" other tabs that are skinned?  I would be fine if the method is unsupported by Telerik, but it will save a complete redesign of our tab centric application to develop a new navigation structure.

Thank you for your help.

[mika-xws]

Hi Joel,

I also think that even subtabs should look like tabs and not like simple links! I solved this by creating a custom skin, derived from the Telerik Default skin, and replaced all occurrences of ".rtsLevel1" in the CSS file with ".rtsLevel". So the styles will be applied to all tab levels, not only to level 1. If you have CSS skills, the approach should be clear.

HTH

[Yana]

Hello Joel,

You just have to modify the skin applying the styles for root tabs to sub tabs, I've attached a simple page with modified Outlook skin, please download it and give it a try.

Let us know which skin you need in your project and we'll modify it for you.

Best wishes,
Yana
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.

[Joel]

Mika, thank you for your help.  That solution worked for me for WebBlue, but not for Outlook oddly enough. I am using webblue by default, but the color schemes are user selectable so I have to do this for all skins we choose to include.

The telerik solution of modifing the style, while retaining the embedded skin works very elegantly, thank you.  It fits exceptionally well with the master page methodology we use.

In both solutions, the "sub" tab that is selected is underlined.  Any ideas in either solution where that is coming from or how to override it?  Nothing is jumping out at me in the css file for the underline.

Thanks to all for the help.

[Joel]

I found this answer in another thread and it worked.  Posting for a complete thread.

        div.RadTabStrip .rtsLevel .rtsSelected {
   text-decoration: none !important;
}

[Winni]

Hi ,
 I also have the same problem.I am using  the skin Office2007
I tried with changing rtsLevel1 to rtsLevel so that it could be applied to all levels   , but still  not working for the child tabs.
Could any body please help me to solve this problem out.

Regards,
Soumya

[Winni]

adding to the above post,
i am using Telerik.Web.UI Trial Version (2011.1.413.35)

[Princy]

Hello Soumya,

Check the following forum thread which discussed similar scenario.
Radtabstrip - need some help.

Thanks,
Princy.