There are times when I fight and fight the interface in flex. This happens when you embed components within other components and those components are in other containers like HBox, VBox, Canvas, or any other container… Also say your using ViewStacks, and you throw that into the mix, and all the sudden you have a screen with for or 5 vertical or horizontal scroll bars in it.

Click Here to view the Example

Right click to view the source

I usually fiddle with the contraints and end up getting it to work out well enough for me so I don’t end up having scroll bars on my page unless it’s not viewed at full screen.


Most of the applications we make are geared toward internal high end corporate usage. There may be only be one department of a company working with the application we made, and then we make another totally different application for a different department. So it’s not like the screen has to be made to fit all of these different screen resolutions, and all the like. We can usually gear toward a standard 1024 x 768 resolution. But we try to make our applications resize with the browser to some extent.

In which case you use a lot of percentages and contraint based layout… and sometimes you simply can’t help but see some scroll bars… and usually after skinning and application the standard flex scroll bar tends to stand out in an application and makes it look not so “friendly on the eyes” as I like to say.

So here is a way to skin the scroll bar and make it look a little more friendly.

I would love to thank the Flex Show, and also the Flex 2 Style Explorer. That tool is a god send, and if you haven’t seen it, check it out here http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Click Here to view the Example

Right click to view the source