Styling RadTab

4 posts, 0 answers
  1. kishore
    kishore avatar
    5 posts
    Member since:
    Jun 2016

    Posted 06 Aug 2016 Link to this post

    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... 

  2.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 09 Aug 2016 Link to this post

    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.
  5. kishore
    kishore avatar
    5 posts
    Member since:
    Jun 2016

    Posted 10 Aug 2016 in reply to Bozhidar Link to this post

    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

  7. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 10 Aug 2016 Link to this post

    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.
Back to Top