How do I visually “break out” of a Container in Flex?

Question

Here's my problem - I have some code like this:

<mx:Canvas width="300" height="300">
     <mx:Button x="800" />
</mx:Canvas>

So the problem is that the Button inside the canvas has an x property way in excess of the Canvas's width - since it's a child of the Canvas, the Canvas masks it and creates some scrollbars for me to scroll over to the button.

What I'd like is to display the button - 800 pixels to the left of the Canvas without the scrollbars while still leaving the button as a child of the Canvas. How do I do that?

Answer 1

I figured it out - apparently the Container has a property called clipContent - here's the description from Adobe:

Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.

If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy. The default value is true.

So basically - to show the button outside of the bounds of the container I need to do the following:

<mx:Canvas width="300" height="300" clipContent="false" >
     <mx:Button x="800" />
</mx:Canvas>

That was easier than I thought it was going to be. :)

Here's the official doc...

Answer 2

You should be able to use the includeInLayout property also, which would allow you to apply it to each child component independently.