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

Styling hierarchical tabstrip with borders

1 Answer 129 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
TriZetto
Top achievements
Rank 1
TriZetto asked on 17 Apr 2009, 08:34 PM
Hi,

I'm trying to style a hierarchical tabstrip and multipage controls so that the tabs "content area" has a border around it.  I apply a css style to the multipage element giving it a left, right, and bottom borders, and applying a background image.  I use the "ShowBaseLine="true" property of the tabstrip to get the top border.  This works fine for a tab with no second level.  But for the tabs with second levels, the border is broken on the left and right.  How can I properly style this so the border is not broken?  Am I missing something easy?  Also, I think I might want to set the background of the second level tabs to be either a solid color, or to extend the background image of the multipage up.  Any idea if this is possible?  Finally, on tabs that have no second level, the vertical space of the combined tabstrip/multipage is reduced by about 26px.  I have tried to work around this by putting an empty second level tab but that didnt seem to work.

looks good
<img alt="looks good" src="http://www.brianmila.com/tabstrip1.jpg">

broken borders
<img alt="broken borders" src="http://www.brianmila.com/tabstrip2.jpg">

Thanks,
Brian





1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 20 Apr 2009, 01:10 PM
Hello TriZetto,

You can add borders around the second level group using the following CSS:

        div.RadTabStrip .rtsLevel2
        {
            border-style: solid;
            border-color: #48525B;
            border-width: 0 1px;
            width: auto;
        }

If you want the second level to be always visible, just add the following two properties to the rule:

            display: block;
            height: 26px;

A sample page that demonstrates both can be found attached to this thread.

Sincerely yours,
Alex
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.
Tags
TabStrip
Asked by
TriZetto
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or