This is a migrated thread and some comments may be shown as answers.
Tab strip ImageUrl
3 Answers 50 Views
This is a migrated thread and some comments may be shown as answers.
Adam Nelson
Top achievements
Rank 2
Adam Nelson asked on 26 Oct 2010, 08:02 PM
I would like to use images with the tab control, but to limit the number of requests for files, I want to use a single sprite image and be able to position the background through CSS.

the ImageUrl property renders an img tag, so I dont think i can use that.

I could try one of the CssClass properties for each tag, but not sure if I'd be able to position the text to the right of the image properly.

I could put a Div tag in the Text property with a class defined for the background image and positioning. but this seems a bit hacky.

Same question for the Toolbar control, whats the best way to make it work with a sprite.

Thanks for any advice,

Adam Nelson

3 Answers, 1 is accepted

Sort by
0
Accepted
Cori
Top achievements
Rank 2
answered on 28 Oct 2010, 04:41 PM
Hello Adam,

I would use the CssClass approach. To position the text to the right of the image, all you need to do is set the padding-right property to the width or so of the image in the sprite. The sprite will not be affected by the padding.

I hope that helps.
0
Adam Nelson
Top achievements
Rank 2
answered on 28 Oct 2010, 06:25 PM
Thanks for the reply Cori,

Thats how I ended up going about it also.

My new classes needed to be applied to the inner most span so the style blocks ended up looking like this.

.tabStripSprite .rtsTxt
{
    background-image:url('images/tabImagesSprite.png');
    background-repeat:no-repeat;   
    padding-left:20px !important;
}
.tabStripSpriteImageAssets .rtsTxt { background-position:0px 0px; }
.tabStripSpriteImageWorkItems .rtsTxt { background-position:0px -25px; }

One master class to set the image url and the padding, and then a second class applied to each tab as well which moved the position of the sprite around.

Worked out well.

0
Ali
Top achievements
Rank 1
answered on 17 Feb 2013, 09:36 AM
Finally got the CSS sprites to work on my RadTab.

In ImageUrl add a 1X1 pixel transparent .png/.gif image. Add style to the class 'rtsImg' and you are good to go.

.ASPX Page:
<telerik:RadTab Text="My <u>W</u>ebsites" ImageUrl="~/Stc/Img/1x1.png" CssClass="Tab_Url" AccessKey="W" Value="W" Width="33%">
<telerik:RadTab Text="My <u>F</u>olders" ImageUrl="~/Stc/Img/1x1.png" CssClass="Tab_Lst" AccessKey="F" Value="F" Width="33%"> 

CSS:
.Tab_Url .rtsImg, .Tab_Lst .rtsImg
{
    background: transparent url('../Img/sprite.png') no-repeat 0 0;
    width:32px !important;
    height:32px !important;
    margin:0px 5px 0px 0px !important;
}

.Tab_Url .rtsImg {background-position: 0px 0px !important;}
.Tab_Lst .rtsImg {background-position: 0px -32px !important;}


Thanks.
http://www.megasearches.com/
Asked by
Adam Nelson
Top achievements
Rank 2
Answers by
Cori
Top achievements
Rank 2
Adam Nelson
Top achievements
Rank 2
Ali
Top achievements
Rank 1
Share this question
or