Question

I discovered this while doing some programmatic panel resizing:
Components in a spark Panel will still be visible when their location is outside the physical Panel boundaries. This does not happen with the mx Panel.

Running Flex 4.1 on Windows 7

I tried putting mx and spark controls in the spark Panel, and they both appear outside of the boundaries. Note this doesn’t happen with the mx Panel.

What am I missing to make the spark behave like the mx?

Thanks !

Sample Code:

    <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel x="6" y="8" width="157" height="200">
        <s:Label x="2" y="10" text="ABCDEFGHIJKL" width="258" height="35" textAlign="right"/>
        <mx:Label text="Label" x="232" y="55"/>
        <mx:Button x="125" y="96" label="Button"/>
    </s:Panel>
    <mx:Panel x="10" y="216" width="200" height="200" layout="absolute">
        <mx:Label x="0" y="46" text="Label" width="217" textAlign="right"/>
        <mx:Button x="163" y="88" label="Button"/>
    </mx:Panel> 
</s:WindowedApplication>

Answer 1

You may put a s:Group in them and set clipAndEnableScrolling="true". It’s quite similar to CSS’s overflow:hidden.