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?

Answer 1

Have you tried setting

background-alpha: 0.0;

on the container that is getting the scrollbars? It should let the rect of the container pick up the color of the parent then.

Answer 2

One dirty trick would be to use a mask to hide that square. Something like this :

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationComplete()">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            public function creationComplete():void
            {
                var compMask:UIComponent = new UIComponent;
                compMask.graphics.beginFill( 0xff0000 );
                compMask.graphics.drawRect( 0, 0, comp.width, comp.height - 16 );
                compMask.graphics.drawRect( 0, comp.height - 16, comp.width - 16, 16 );
                compMask.graphics.endFill();
                addChild( compMask );
                comp.mask = compMask;
            }
        ]]>
    </mx:Script>

    <mx:Canvas id="comp" width="300" height="300" horizontalScrollPolicy="on" verticalScrollPolicy="on"/>

</mx:WindowedApplication>

Just tried it, it works. You'll just have to redraw the mask each time the component is resized. Best thing would be to create a custom class which extends Canvas and do the job itself.

EDIT: Of course, you will want to change "16" by the weight of your custom scrollbars if the value is different.

Answer 3

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 ;)

Answer 4

You already have a good answer but another alternative is to manually manage your scrollbars. You can put a scrollbar anywhere in your app and bind it to scroll the control you want. Doing this you could effectively get the vertical scroll bar to stretch those extra 16 pixels to cover the whitebox. Note that I would only do this if it were guaranteed to always need a scrollbar. Would kind of end up looking like my really bad text drawing here:

          |  |
          |  |
__________|__|
_______| >|\/|