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

Styling RadTab

3 Answers 209 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
kishore
Top achievements
Rank 1
kishore asked on 06 Aug 2016, 05:53 PM

Hi, I am currently working on a multi-step form and i am using RadTabStrip for the same.

I am placing the tabs in vertical orientation. Now I would like to give a background color to the tabs.

My issue is that that background color would apply only till the tabs, but rather i would want the background to apply till the height the page view.

Like shown in the pic. 

Also, just to note that all the page view have different height. and also the height will change dynamically as many controls are added dynamically.

thanks in advance for all kinds for inputs... 

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 09 Aug 2016, 11:05 AM
Hello,

You could use or rework based on your scenario the following:

<head runat="server">
    <title></title>
    <style>
        body {
            font-size: 14px;
        }
 
        .RadTabStrip.rtsVertical {
            padding: 10px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <telerik:RadTabStrip runat="server" Orientation="VerticalLeft">
            <Tabs>
                <telerik:RadTab runat="server" Text="Tab 1"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 2"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 3"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 4"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </form>
</body>
</html>

I put an extra padding to the TabStrip wrapper to visualize its newly set background color, which is different than the tabs.

Regards,
Bozhidar
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
kishore
Top achievements
Rank 1
answered on 10 Aug 2016, 05:35 AM

Hello Bozhidar,

Thanks for your feedback. 

The background color was applied successfully. 

But i have one more requirement. How could i set the tab height (.RadTabStrip.rtsVertical) equal to the pageview height ?

Also, each pageview in the tabs have different height.

Thanks in advance for your help.

Regards !!

Kishroe

0
Bozhidar
Telerik team
answered on 10 Aug 2016, 06:49 AM
Hi,

This is the way to set a specific height to the TabStrip:

<head runat="server">
    <title></title>
    <style>
        body {
            font-size: 14px;
        }
 
        .RadTabStrip.rtsVertical {
            height: 300px;
            padding: 10px;
            background-color: blue;
        }
 
        div.rtsLevel.rtsLevel1 {
            border-color: blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
        <telerik:RadTabStrip runat="server" Orientation="VerticalLeft">
            <Tabs>
                <telerik:RadTab runat="server" Text="Tab 1"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 2"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 3"></telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 4"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </form>
</body>
</html>

The additional styles are marked in yellow.

You could find the tabs preview element also and set to all of them the same height.

In order to help further, we will need to provide us a sample code.

Regards,
Bozhidar
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
TabStrip
Asked by
kishore
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
kishore
Top achievements
Rank 1
Share this question
or