Tab strip ImageUrl

[Adam Nelson]

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

[Cori]

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.

[Adam Nelson]

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.

[Ali]

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/