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

Left alighning the image

2 Answers 46 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
PGM
Top achievements
Rank 1
PGM asked on 05 Nov 2009, 05:49 AM
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 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 10 Nov 2009, 09:37 AM
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.
0
PGM
Top achievements
Rank 1
answered on 12 Nov 2009, 02:58 AM
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
Tags
TabStrip
Asked by
PGM
Top achievements
Rank 1
Answers by
Yana
Telerik team
PGM
Top achievements
Rank 1
Share this question
or