Search code examples
apache-flexcoding-stylescrollbar

Flex scrollbar styling issue

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.

what's wrong with the right bottom cornor?

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!

Solution

  • 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!