RadTabStrip space between tabs and round corners to the tabs

9 posts, 1 answers
  1. Srinivasa Rao Ranga
    Srinivasa Rao  Ranga avatar
    20 posts
    Member since:
    May 2010

    Posted 23 Jun 2010 Link to this post

    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

  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Jun 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Srinivasa Rao Ranga
    Srinivasa Rao  Ranga avatar
    20 posts
    Member since:
    May 2010

    Posted 23 Jun 2010 Link to this post

    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
  5. Michael
    Michael avatar
    15 posts
    Member since:
    Jul 2010

    Posted 04 Aug 2010 Link to this post

    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
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 06 Aug 2010 Link to this post

    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
  7. Michael
    Michael avatar
    15 posts
    Member since:
    Jul 2010

    Posted 07 Aug 2010 Link to this post

    Thanks, that works perfectly!
  8. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 01 Jun 2011 Link to this post

    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
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Jun 2011 Link to this post

    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.
  10. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 01 Jun 2011 Link to this post

    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);
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017