Possible to have custom scroll button size?

3 posts, 1 answers
  1. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 01 Feb 2012 Link to this post

    I have a custom skin, and cannot seem to get my custom arrows to show. I'd like bigger arrows for people browsing on touch devices.  Is this possible?  I tried amending the background-position values in the skin css, but to no avail.  Currently, the images used seem to be coming from a fixed place in the sprite image, but not where I'm trying to point in the css.

    NB: Even though this the RadTabStrip has ScrollChildren set to true, the tabs wrap in IE9 and Chrome, though never in Firefox (all Win7).  Note that sometimes the tab strip becomes a single line strip as I remove and add tabs.

    Any help would be welcome.

    See an example at http://an.rsl.wustl.edu/radcontrolswebapp1/default.aspx

    Here is part of my custom skin css (named "an12")
    .RadTabStrip_an12 .rtsLI,
    .RadTabStrip_an12 .rtsLink
    {
        color: #000;
        font: 12px/26px "Segoe UI", Arial, sans-serif;
    }
     
    .RadTabStripLeft_an12 .rtsSeparator,
    .RadTabStripRight_an12 .rtsSeparator
    {
        background: #828282;
    }
     
    /* <disabled tabs> */
    .RadTabStrip_an12 .rtsDisabled
    {
        color: #aaa;
    }
    /* </disabled tabs> */
     
    /* <scrolling arrows> */
    .RadTabStrip_an12 .rtsNextArrow,
    .RadTabStrip_an12 .rtsPrevArrow,
    .RadTabStrip_an12 .rtsPrevArrowDisabled,
    .RadTabStrip_an12 .rtsNextArrowDisabled
    {
        background-image: url('TabStrip/TabStripStates.png');
        height:48px;
        width:32px;
    }
     
    .RadTabStrip_an12 .RadTabStripTop_an12 .rtsNextArrow { background-position: 0 -288px; }
    .RadTabStrip_an12 .RadTabStripTop_an12 .rtsPrevArrow { background-position: -32px -288px; }
    .RadTabStrip_an12 .RadTabStripTop_an12 .rtsPrevArrowDisabled{ background-position: -64px -288px; }
    .RadTabStrip_an12 .RadTabStripTop_an12 .rtsNextArrowDisabled{ background-position: -96px -288px; }
     
    /* </scrolling arrows> */
  2. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 Feb 2012 Link to this post

    Hello Tom,

    In general there are two stylesheets that are applied to all of our controls. The first one is the baseStyleSheet (added in Q3 2009 release) and the second one is specific for its skin. Since the background-position, the width and the height of the scrolling arrows are applied through the baseStyleSheet you will need to override it by raising the specificity (you can use the code below). If you want to learn more about specificity, there is an excellent article that you can read here.

    /*applying height and width to the arrows*/
    div.RadTabStrip .rtsPrevArrow,
    div.RadTabStrip .rtsNextArrow,
    div.RadTabStrip .rtsPrevArrowDisabled,
    div.RadTabStrip .rtsNextArrowDisabled          
    {
    height: 18px;
    line-height: 18px;
    margin-top: 5px;
    width: 18px;
    }
     
    /* representing the current position of the arrows*/       
    div.RadTabStrip .rtsPrevArrow {
    background-position: 0 -208px;
    }
    div.RadTabStrip .rtsNextArrow {
    background-position: -18px -208px;
    }
    div.RadTabStrip .rtsPrevArrow:hover {
    background-position: -36px -208px;
    }
    div.RadTabStrip .rtsNextArrow:hover {
    background-position: -54px -208px;
    }
    div.RadTabStrip .rtsPrevArrowDisabled,
    div.RadTabStrip .rtsPrevArrowDisabled:hover {
    background-position: -72px -208px;
    }
    div.RadTabStrip .rtsNextArrowDisabled,
    div.RadTabStrip .rtsNextArrowDisabled:hover {
    background-position: -90px -208px;
    }
     
    /*appplying the sprite image of the arrows*/
    div.RadTabStrip_Vista .rtsNextArrow,
    div.RadTabStrip_Vista .rtsPrevArrow,
    div.RadTabStrip_Vista .rtsPrevArrowDisabled,
    div.RadTabStrip_Vista .rtsNextArrowDisabled {
    background-image: url('TabStrip/TabStripStates.png');
    }

    Kind regards,
    Kate
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 06 Feb 2012 Link to this post

    Thanks, Kate. Your solution is perfect, and the link on specificity is great.

    Of course, my tab scroll buttons are ridiculously huge on a web page, but work for a tablet.
Back to Top