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

Possible to have custom scroll button size?

2 Answers 78 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 01 Feb 2012, 11:03 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Kate
Telerik team
answered on 06 Feb 2012, 01:28 PM
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 >>
0
Tom
Top achievements
Rank 1
answered on 06 Feb 2012, 05:42 PM
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.
Tags
TabStrip
Asked by
Tom
Top achievements
Rank 1
Answers by
Kate
Telerik team
Tom
Top achievements
Rank 1
Share this question
or