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?

Curriery

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...

Curriery

Awesome! I have had some recent use cases, in a Flex app I'm currently working on, that I just knew I was going to have to figure this out for in the future! This is why stackoverflow is becoming daily tag specific read for me! – Ennius

Having clipContent default to true is IMO one of the top 5 biggest mistakes in Flex. Also in the top 5 was having try/catch blocks that run under the doLater and doLater2 handlers. – Sheri

You think that most uses of Containers are not to ... contain? – Deen

Answer 2

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

Rola