Left alighning the image

3 posts, 0 answers
  1. PGM
    PGM avatar
    2 posts
    Member since:
    Sep 2009

    Posted 04 Nov 2009 Link to this post

    Hello,

    In the tab we have both the text and icon(image). 
    By default the icon also comes center aligned (close to the text).
    We would like to place it left alighned, with a custom margin,
    Can you please guide us here,

    Warm Regards
    Praba Swami
  2. Yana
    Admin
    Yana avatar
    4850 posts

    Posted 10 Nov 2009 Link to this post

    Hello Praba,

    Please set CssClass property to the tabs that have ImageUrl set:

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Vista">
        <Tabs>
            <telerik:RadTab Text="tab 1" ImageUrl="1.gif" CssClass="imgTab" />
            <telerik:RadTab Text="tab 2" ImageUrl="2.gif" CssClass="imgTab" />
        </Tabs>
    </telerik:RadTabStrip>

    and add the following css styles to your page:

    <style type="text/css">
        /* left margin of image */
        div.RadTabStrip .imgTab {
            padding-left: 1px;
        }
         
        /* right margin of image */
        div.RadTabStrip .imgTab .rtsTxt {
            padding-left: 2px;
        }
    </style>


    Best wishes,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. PGM
    PGM avatar
    2 posts
    Member since:
    Sep 2009

    Posted 11 Nov 2009 Link to this post

    Hi Yana,

    Thanks for your email.
    The css style did not work as it is.

    Style was slightly modified as follows, then the result was closer to expectation.

    /* left margin of image */
    div.RadTabStrip .imgTab .rtsIn
    {
        padding-right:200px;
    }
     
    /* right margin of image */
    div.RadTabStrip .imgTab .rtsTxt
    {
        padding-left: 30px;
    }

    Warm Regards
    Praba
Back to Top