Flex scrollbar styling issue

Question

Hey buddy,

I'm trying to style vscrollbar and hscrollbar inside a Vbox.But there's always a white square thing at the right bottom cornor which can not be styled.

My CSS is:

ScrollBar{
downArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
downArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_down.png");
upArrowUpSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowOverSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
upArrowDownSkin: Embed(source="assets/images/scrollbar/arrow_up.png");
thumbDownSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbUpSkin: Embed(source="assets/images/scrollbar/thumb.png");
thumbOverSkin: Embed(source="assets/images/scrollbar/thumb.png");
trackSkin:Embed(source="assets/images/scrollbar/track.png");    
fillAlphas:0,0,0,0;}

Could anyone help me out?Much Thanks!

Answer 1

That area isn't controlled by the scroll bar(s), it's part of the original container. Does the VBox have it's background colour set to black?

Answer 2

This is a weird one. The white box at the bottom right is actually a (raw) child of the container.

To get around this you need to subclass whatever container you want to add your styled scrollbars to and remove the child called "whitebox":

var whitebox:DisplayObject = rawChildren.getChildByName('whiteBox');
if (whitebox)
   rawChildren.removeChild(whitebox);

IIRC you need to do the above in two places: an override of createChildren and an override of validateDisplayList. In both cases remember to call the super class method first!