You can’t… That is to say, there is no style property to change the color of that little white box that appears in the lower right of a Container component when the vertical and horizontal scrollbars are present.
Today, i added a Canvas that had fixed dimensions to the displaylist of a Flex application. Because the content within the Canvas instance would vary in size, vertical and horizontal scrollbars are needed for content that is larger than the width and height of the fixed dimensions of its parent container. When both scrollbars are present on the display, they meet in the lower right and create an empty space. That empty space is actually a FlexShape in the Container class called whiteBox. The whiteBox shape is protected, but is added and removed programmatically within private methods based on the presence of both directional scrollbars.
Fine by me… the problem i have is that the color of whiteBox is hard-coded ( to #FFFFFF ). Super! I guess if you name something with a prefix that is a color, you have to hard-code the actual color it will be using to draw…
There is an easy work-around by just creating a subclass of Canvas and overriding the updateDisplayList() method to remove whiteBox, but it seems kind of hackish, especially if it is going to be added each time the vert and horiz scrollbars are added to the display and then i have to remove it again.
Here’s an example of how i resolved my issue:
package { import mx.containers.Canvas; public class NoWhiteBoxContainer extends Canvas { public function NoWhiteBoxContainer() { super(); } override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void { super.updateDisplayList( unscaledWidth, unscaledHeight ); if( whiteBox ) rawChildren.removeChild( whiteBox ); } } }
Nothing extremely complicated, but it would have been nice to just set a style property or for the fill color to inherit from the backgroundColor property. ah well… Hopefully someone may find this post if they are wondering what to do with that white box.
Agreed
Whenever the box is added or removed the displayList is invalidated so its fine handling this in updateDisplayList.
You could, instead of just removing it, remove it and add your own, then add some styles to Container so that it can be skinned.
You’d have to Monkey patch it unless you wanted to create a custom class for every class that extends Container though.
Defo worth logging a bug, once done, give me a shout, cos you got my vote!
nice job,but after remove the whiteBox, have you met this bug?when you click the scrollbar it says “The supplied DisplayObject must be a child of the caller.”
How dow we remove the whitebox in the datagrid when a hscrollbar is displayed?
Do not remove the box. Retain it and repaint
if( whiteBox ) {
var g:Graphics = whiteBox.graphics;
g.clear();
g.beginFill(0xFFFFFF, 0);
g.drawRect(0, 0, verticalScrollBar.minWidth, horizontalScrollBar.minHeight);
g.endFill()
}