I love Flex, but the default scrollbars are hideous. Sure, you can customize a couple of values in the CSS, the track and fill colors, etc. But those stupid arrow buttons are still there, sucking up the good vibes from the rest of your application.
So how do we get rid of them?
First, create a custom class that extends ProgrammaticSkin
. Override the updateDisplayList()
method in this class and leave it blank. Don’t even invoke the super.updateDisplayList()
method!
Second, add a class reference to your CSS file for each of the up and down arrow skin properties.
Voilà! The arrow buttons are gone! 🙂
Update: I’ve posted sample code below.
Sample code for the custom skin:
package { import mx.skins.ProgrammaticSkin; public class NoArrowSkin extends ProgrammaticSkin { override protected function updateDisplayList (w : Number, h : Number) : void { } } } |
Sample code for the custom styles:
ScrollBar { upArrowDisabledSkin: ClassReference("NoArrowSkin"); upArrowDownSkin: ClassReference("NoArrowSkin"); upArrowOverSkin: ClassReference("NoArrowSkin"); upArrowUpSkin: ClassReference("NoArrowSkin"); downArrowDisabledSkin: ClassReference("NoArrowSkin"); downArrowDownSkin: ClassReference("NoArrowSkin"); downArrowOverSkin: ClassReference("NoArrowSkin"); downArrowUpSkin: ClassReference("NoArrowSkin"); } |
7 comments
Comments feed for this article
January 25, 2008 at 9:30 am
Nick Schneble
My good friend Sean Voisen has also pointed out that you don’t even have to override ProgrammaticSkin to do this – simply using ProgrammaticSkin as the class reference in your CSS will work!
Of course, that’s the LAZY solution… 🙂
July 15, 2008 at 9:09 am
corgan1003
Nick, the links you provided do not provide the code. Is there anyway you could post the code again? It would really like to try this.
Thanks,
Tony
July 15, 2008 at 9:17 am
Nick Schneble
Tony,
Sure, no problem! I’ll have the post updated in a few minutes!
July 16, 2008 at 7:51 am
corgan1003
Thank you!
FYI: I had to specify the full class path like…
ScrollBar
{
upArrowDisabledSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
upArrowDownSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
upArrowOverSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
upArrowUpSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
downArrowDisabledSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
downArrowDownSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
downArrowOverSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
downArrowUpSkin: ClassReference(”com.blah.blah.NoArrowSkin”);
}
July 16, 2008 at 8:22 am
Nick Schneble
No worries!
Thanks for mentioning the package location. If you’ll notice, the custom skin doesn’t have a package declaration, so the ClassReference() in the sample code doesn’t require one.
When I do this in my own applications however, I do have to include the package location in the ClassReference(). 😉
March 7, 2009 at 7:10 am
adammeszaros
It is not works if you compile css ot swf? Any suggestions? Implement a custom scrollbar class?
March 24, 2009 at 10:44 am
Nick Schneble
@adammeszaros
You’re right – this doesn’t work for style SWFs. It has something to do with how the class reference links work and the sandboxing of runtime-loaded SWFs.
Since hiding the arrow buttons is usually an all-or-nothing approach, I tend to include these styles in a regular CSS file compiled with the application.
I then use style SWFs for the rest of my styles and load them at runtime.