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
You could use or rework based on your scenario the following:
<html xmlns="http://www.w3.org/1999/xhtml"><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
Rank 1
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
This is the way to set a specific height to the TabStrip:
<html xmlns="http://www.w3.org/1999/xhtml"><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