Scrollbar skininng problem

Question

I'm skinning scrollbar in my flex app and got one problem. This white square between scrollbars(view the image) ruibs all my design and i need to disable it, make it invisible, change it background color, alpha or smth like this.

I can paste some code here but i think there is no need in it. Working in Flex 3. any ideas?

alt text http://img97.imageshack.us/img97/9206/scrollbar.png

Answer 1

I actually found the culprit looking inside the Flex framework. This square (called whiteBox) is created in Container.as.

It's pretty easy to get rid of it, you just have to create a class extending the container you want to use.

Exemple for a Canvas :

package
{
    import mx.containers.Canvas;

    public class NoWhiteBoxCanvas extends Canvas
    {

        public function NoWhiteBoxCanvas()
        {
            super();
        }

        override public function validateDisplayList():void
        {
            super.validateDisplayList();
            this.whiteBox.visible = false;
        }

    }
}

Then in your MXML:

<local:NoWhiteBoxCanvas width="300" height="300" horizontalScrollPolicy="on" verticalScrollPolicy="on"/>

...and then no white square anymore ;)