[Solved] Tabs into Tabs : Color problem?

[Dadv]

Hello,
I just try to insert a tabstrip into an other tabstrip like that :

MasterPage

<%= Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                      .Add("Css/telerik.common.min.css")
                      .Add("Css/telerik.web20.min.css")
                      .Compress(true))
%>

ContentPage

<% Html.Telerik().TabStrip()
          .Name("T1")
          .Items(parent =>
          {
              parent.Add()
              .Text("Test")
              .Selected(true)
              .Content(() =>
              {
                  Html.Telerik().TabStrip()
                  .Name("T2")
                  .Items(child =>
                  {
                      child.Add()
                      .Text("Test1")
                      .Content("Test")
                      .Selected(true);

                      child.Add()
                     .Text("Test2")
                     .Content("Test2");
                  }).Render();
              });
              parent.Add()
              .Text("Test2")
              .Content("Test2");
          }).Render();
  %>

Html Result

<div
       id="T1"
       class="t-widget t-tabstrip t-header"
       jquery1280478960285="4">
       <ul
           class="t-reset">
           <li
               class="t-item t-state-default t-state-active">
               <a
                   class="t-link"
                   href="http://localhost:1065/Home/Tutorials?#T1-1">
                   Test</a>
           </li>
           <li
               class="t-item t-state-default">
               <a
                   class="t-link"
                   href="http://localhost:1065/Home/Tutorials?#T1-2">
                   Test2</a>
           </li>
       </ul>
       <div
           style="display: block"
           id="T1-1"
           class="t-content t-state-active">
           <div
               id="T2"
               class="t-widget t-tabstrip t-header"
               jquery1280478960285="5">
               <ul
                   class="t-reset">
                   <li
                       class="t-item t-state-active">
                       <a
                           class="t-link"
                           href="http://localhost:1065/Home/Tutorials?#T2-1">
                           Test1</a>
                   </li>
                   <li
                       class="t-item t-state-default">
                       <a
                           class="t-link"
                           href="http://localhost:1065/Home/Tutorials?#T2-2">
                           Test2</a>
                   </li>
               </ul>
               <div
                   style="display: block"
                   id="T2-1"
                   class="t-content t-state-active"
                   jquery1280478960285="6">
                   Test
               </div>
               <div
                   id="T2-2"
                   class="t-content">
                   Test2
               </div>
           </div>
       </div>
       <div
           id="T1-2"
           class="t-content">
           Test2
       </div>
   </div>

The tabs works normaly but the font color of the inside not selected header tabs are not white.
Notice that the first Tabs are good, only the embedded tabs have the problem.

How can i change the font color to white when it is not selected ?

Thx for the answers, and sorry for my english ;)

Dadv

Telerik Extensions for ASP.NET MVC Open Source Version: 2010.1 309
All Brothers
Windows XP Pro SP3

[Dadv]

I fix the issue by adding 2 class in a custom css file :

.t-tabstrip li.t-state-default a
{
    color:white;
}

.t-tabstrip li.t-state-active a
{
    color:#333;
}

Tell me if an other better solution exist :)

Thx for all.

[Alex Gyoshev]

Hello Dadv,

Thank you for the bug report - this is indeed a problem with the Web20 skin - you can fix it with the following CSS:

.t-state-active .t-header .t-state-active,
.t-state-active .t-header .t-state-active .t-link
{
    color: #333;
}
 
.t-state-active .t-header,
.t-state-active .t-header .t-link
{
    color: #fff;
}
 
.t-state-active .t-header .t-state-hover .t-link
{
    color: #333;
}

The fix will be available with the official version of Q2 2010.

Regards,
Alex Gyoshev
the Telerik team

[Dadv]

You're welcome, 
Indeed i choose the bad one  :)

Thank's for the answer.

Dadv

[Jeroen Eikmans]

Hello Alex,

The problem with child-tabs using the black color from the selected master tab also exists in the WebBlue skin, version 2011.2.712.
I used your fix and copied the css into my custom css-file and the not-selected child-tabs now have the white text.

Kind regards,
Roel

[Dimo]

Hi Roel,

Thanks for noting, we have gone through all skins and fixed this issue. Changes will take effect in the next internal build.

I have updated your Telerik points.

All the best,
Dimo
the Telerik team