Archives

It seems like every UI design we are asked to implement these days has what I call “designer scroll bars” – skinny little tone on tone scroll bars that have no scroll arrows. While I’m not a big fan of these scroll bars for a number of reasons (not least of which is usability), they are still something we’re required to do on a fairly common basis.

Luckily, in Flex 3 hiding the scroll arrows, and making the scrollbar thinner is a fairly simple task that you can accomplish globally with just a few lines of CSS.

Using a null class reference as the skins for the arrow buttons effectively hides the arrows. In the above example I am using 6x20px PNGs for the thumb and track skins, and setting scaleGrid properties to preserve the rounded corners. The scroll bar will lay itself out based on the dimensions of the PNG graphics, making it 6px wide. You can see the result below.

The only issue I’ve discovered so far is that some lists (ex. DataGrid) will not redraw correctly according to the scrollbar width until the first time the user interacts with them. I’ll try to post the solution to this in the next few days. You can see this issue in the picture below, where the cell renderers and headers are not sized appropriately.