RadTabStrip space between tabs and round corners to the tabs

[Srinivasa Rao Ranga]

HI,

I am using RadTabstrip in my application,inside RadTabstrip i am having tabs,my requirement is to have space between the tabs with round corners

[Shinu]

Hello,

I used following CSS on page to get spacing between tabs.

CSS:

<style type="text/css">
    div.RadTabStrip .rtsLI
    {
        margin-right: 10px;
    }
</style>

And set the suitable skin for getting rounded corners for tab.

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"  Skin="Outlook">

Also you can create a custom RadTabStrip skin, using the appropriate skin as a base. The following tutorial describes more.
Creating A Custom Skin

-Shinu.

[Srinivasa Rao Ranga]

HI Shinu,thanks a lot its working fine

one more thing,on click of the tabs i need to load respective tabs ,that should happenend on client side means it should not postback

i am getting above functionality,the thing the trabstrip is get visible false at the time of loading and after loading it is getting visible true
i am keeping the treeview inside asp:update panell
can u please help me on this

Thanks!
Srinivas

[Michael]

This works well to move the tabs closer together (a negative margin) or father apart (a positive margin).  

 However, is there a way to make the tabs themselves narrower or reduce the internal padding of the LI?

Michael

[Yana]

Hello Michael,

You can use the following css styles to achieve this:

div.RadTabStrip .rtsLevel .rtsIn,
div.RadTabStrip .rtsLevel .rtsTxt {
  padding: 0;
}

Kind regards,
Yana
the Telerik team

[Michael]

Thanks, that works perfectly!

[Hiren]

i want to create a space for 1st tab and rest of the tabs as it is

like: my first tab should be created with 10px -20px gap from start tabstrip and rest of tabs should be created as it is without space

check the image, i removed 1st tab using paintbrush to show how i want to render the 1st tab

[Princy]

Hello Giri,

Try setting the CSS for first tabstrip which worked fine as expected in my end.

CSS:

<style type="text/css">

.TabStripCss

{

    margin-right:60px !important;

}

 </style>

aspx:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server">

 <Tabs>

        <telerik:RadTab Text="Tab1" CssClass="TabStripCss" ></telerik:RadTab>

        <telerik:RadTab Text="Tab2" ></telerik:RadTab>

        <telerik:RadTab Text="Tab3"></telerik:RadTab>

</Tabs>
</telerik:RadTabStrip>

Thanks,
Princy.

[Hiren]

thanks for you reply
i got the solutions, i used separator to creator space between 2 tabs. i am generating tabs at runtime

anyway your solution will give space between tabs but when we click on the space it selects 1st tab
using separator is best answer

RadTab Separator = new RadTab();
Separator.IsSeparator = true;
Separator.Width = Unit.Pixel(50);
RadTabStrip1.Tabs.Add(Separator);