Clipping a Flex container’s content using the clipContent property

By On February 2, 2008 · 10 Comments

The following example shows how you can clip a container’s content in Flex by setting the clipContent property.
According to the Flex 3 documentation for the Container class’s clipContent property:

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.
The default value is true. 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/02/clipping-a-flex-containers-content-using-the-clipcontent-property/ -->
<mx:Application name="Box_clipContent_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="clipContent:"
                labelPlacement="left"
                selected="false" />
    </mx:ApplicationControlBar>
 
    <mx:Box id="box"
            clipContent="{checkBox.selected}"
            width="320"
            height="240">
        <mx:Image id="img"
                source="http://www.helpexamples.com/flash/images/image1.jpg" />
    </mx:Box>
 
    <mx:Label text="{img.width} x {img.height}" />
 
</mx:Application>

View source is enabled in the following example.

As you can see, the Box container is set to 320 pixels wide by 240 pixels high. The image being loaded is 400 pixels high by 267 pixels wide. When the clipContent property is set to false, the image exceeds the bounds of the Box container causing it to overlap the Label control. If you set the clipContent property to true, the image doesn’t exceed the bounds of the Box container and horizontal and vertical scroll bars appear, allowing you to scroll to see the rest of the content.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

10 Responses to Clipping a Flex container’s content using the clipContent property

  1. Sean says:
    February 4, 2008 at 7:10 pm

    Flex has a bug that it does not clip properly the -x and -y coords ( often not clipping at all @ negative values .)

    I posted a bug on the Flex Bug system but it has yet to be resolved.

    I hope they fix it soon.

    Sean – HeliHobby.com

  2. peterd says:
    February 4, 2008 at 11:21 pm

    Sean,

    Do you know the bug numbers?

    Peter

  3. FlexFlip says:
    May 14, 2008 at 4:52 am

    Is it possible to clip with rounded corners?

  4. Kasey Drexler says:
    September 9, 2008 at 6:33 pm

    You can clip with rounded corners. Just set a canvas with rounded corners up with a mask of what ever you are trying to clip with rounded corners. For instance:

    image.mask = canvas_with_rounded_corners;

    -Peace

  5. Deniz says:
    April 14, 2009 at 3:09 pm

    …with rounded corners? I don’t think so!

  6. Constantin says:
    April 28, 2009 at 7:39 pm

    There is workaround for this bug, prior to Flex 4.0. Simply don’t use negative x or y coordinates
    in child components of Container. Clipping works when negative coordinates are applied to child
    itself.

  7. Constantin says:
    April 28, 2009 at 7:42 pm

    Sean and Peter,
    Bug issue is – http://bugs.adobe.com/jira/browse/SDK-14958

  8. Kasey Drexler says:
    May 16, 2010 at 8:55 pm

    Sorry, but rounded corner masking is possible. See here: http://blog.flexexamples.com/2008/09/09/rounding-the-corners-of-an-image-control-in-flex-using-a-mask/

  9. Shishank(India) says:
    December 7, 2010 at 3:29 am

    If there is a container1 and inside that there is a container2 and inside that there is one more container3 then if clipContent of container2 is true and container1 is false then container3 moves out of container2 as well as container1(despite clipContent of container1 being 0).
    Is this a bug?