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

RadTabStrip space between tabs and round corners to the tabs

8 Answers 258 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Srinivasa Rao Ranga
Top achievements
Rank 1
Srinivasa Rao Ranga asked on 23 Jun 2010, 08:32 AM
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

8 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 23 Jun 2010, 10:10 AM
Hello,

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

CSS:
 
<style type="text/css"
    div.RadTabStrip .rtsLI 
    { 
        margin-right10px
    } 
</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.
0
Srinivasa Rao Ranga
Top achievements
Rank 1
answered on 23 Jun 2010, 11:18 AM
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
0
Michael
Top achievements
Rank 1
answered on 04 Aug 2010, 01:33 PM
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
0
Yana
Telerik team
answered on 06 Aug 2010, 11:10 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Michael
Top achievements
Rank 1
answered on 07 Aug 2010, 06:51 PM
Thanks, that works perfectly!
0
Hiren
Top achievements
Rank 1
answered on 01 Jun 2011, 11:46 AM
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
0
Princy
Top achievements
Rank 1
answered on 01 Jun 2011, 12:45 PM
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.
0
Hiren
Top achievements
Rank 1
answered on 01 Jun 2011, 12:51 PM
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);
Tags
TabStrip
Asked by
Srinivasa Rao Ranga
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Srinivasa Rao Ranga
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Yana
Telerik team
Hiren
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Share this question
or