Pages

April 06, 2011

Custom Scroll bars for MX Tree with no "white box"


Hi guys,

We ran, at work, into a styling problem which has a simple solution yet elusive.
When you try to custom an MX tree (since Spark tree is not available at the moment) you create a vertical and horizontal scroll bars, same as you would anywhere else.
Once both are present you'll notice that there is a small "white box" in the gap that both leave at the bottom-right. Now this bug is known and has a workaround when happens on any Container based control. The solution relies on the fact that there is actually a member named "whiteBox" on the Container that represents the rebellious shape. Set it's visibility to false or it's alpha to 0 and there you have it.
The trouble is that the Tree, or for the sake of the matter, the ListBase doesn't have this "whiteBox" member, so where does it come from and how do we make it go away?
Simple (and some might say, stupid) answer - the background. Just set the background color to "null" within the CSS, and no more white box. Here is a code sample:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
   backgroundColor="0x000000">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

mx|List {                        
content-background-color: "null";
}

</fx:Style>

<s:Panel
width="400"
height="300">
<mx:Tree
width="100%"
height="100%"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"/>
</s:Panel>
</s:Application>




Hope this helps you,

Cheers.

No comments: