Adjusting Appearance of the RadTabs

6 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 11 Oct 2012 Link to this post

    Please take a look at the screenshot I've provided.  Do you notice that there's not enough white space below the tab titles "Regular", "Cable Bolts", and "Reconditioning"?

    I tried several approaches to fix this but could not figure it out.  How can I fix this?  Note: I do NOT want to use skins.

    Robert
  2. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 15 Oct 2012 Link to this post

    Just following up on this.  There's no way to move the text on the tabs up or down?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Oct 2012 Link to this post

    Hi Robert,

    One way to get the desired appearance is to get the correct css class selector and increase the margin/padding of the text. Can you clarify if you use any custom styles as well, since the text of the tabs in our demos do not look the same as the one demonstrated in your attached image?

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 16 Oct 2012 Link to this post

    Kate,

    Here's my pertinent layout code:

            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Align="Justify" ReorderTabsOnSelect="false"<br>                                               Width="100%" Height="407px" AutoPostBack="true" OnTabClick="RadTabStrip1_Click"><br>          <Tabs><br>            <telerik:RadTab Text="Regular" Width="100" /><br>            <telerik:RadTab Text="Cable Bolts" Width="100" /><br>            <telerik:RadTab Text="Reconditioning" Width="100" /><br>          </Tabs><br>        </telerik:RadTabStrip>

    As you see, there are no custom styles introduced there.  Though there are several parent DIVs which may have an effect.

    In any case, what is the particular CSS Selector with which I should experiment with to adjust the vertical position of the Tab text?

    Robert

  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 16 Oct 2012 Link to this post

    Experimenting a little, I can indeed move the tab text up like by introducing this style into my style sheet:

    .rtsIn
    {
      margin-top:-2px;
    }


    Unfortunately, that wrecks the curved styling of the tabs themselves.  What I need to manipulate is just the text itself.
  7. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 16 Oct 2012 Link to this post

    This seems to be the solution:

    .rtsTxt
    {
      margin-top:-2px;
    }



Back to Top
UI for ASP.NET Ajax is Ready for VS 2017