Tab strip ImageUrl

4 posts, 1 answers
  1. Adam Nelson
    Adam Nelson avatar
    48 posts
    Member since:
    Mar 2008

    Posted 26 Oct 2010 Link to this post

    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
  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 28 Oct 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam Nelson
    Adam Nelson avatar
    48 posts
    Member since:
    Mar 2008

    Posted 28 Oct 2010 Link to this post

    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.

  5. Ali
    Ali avatar
    24 posts
    Member since:
    Apr 2010

    Posted 17 Feb 2013 Link to this post

    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/
Back to Top