Resizing a Flex Accordion container to fit its contents

The following example demonstrates how you can make an Accordion container adjust its width to match the contents of the currently selected child.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/resizing-a-flex-accordion-container-to-fit-its-contents/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:XML id="itemsXML">
        <items>
            <item label="Item 1" status="warning" />
            <item label="Item 2" status="critical" />
            <item label="Item 3" status="critical" />
            <item label="Item 4" status="check" />
            <item label="Item 5" status="warning" />
            <item label="Item 6" status="check" />
            <item label="Item 7" status="check" />
            <item label="Item 8" status="critical" />
        </items>
    </mx:XML>

    <mx:XMLListCollection id="checkXLC"
            source="{itemsXML.item.(@status == 'check')}" />

    <mx:XMLListCollection id="warningXLC"
            source="{itemsXML.item.(@status == 'warning')}" />

    <mx:XMLListCollection id="criticalXLC"
            source="{itemsXML.item.(@status == 'critical')}" />

    <mx:Accordion id="accordion"
            resizeToContent="true"
            historyManagementEnabled="false"
            width="400">
        <mx:VBox label="Success" width="100%">
            <mx:DataGrid id="successGrid"
                    dataProvider="{checkXLC}"
                    width="100%"
                    rowCount="{checkXLC.length + 1}">
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Warning" width="100%">
            <mx:DataGrid id="warningGrid"
                    dataProvider="{warningXLC}"
                    width="100%"
                    rowCount="{warningXLC.length + 1}">
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Critical" width="100%">
            <mx:DataGrid id="criticalGrid"
                    dataProvider="{criticalXLC}"
                    width="100%"
                    rowCount="{criticalXLC.length + 1}">
            </mx:DataGrid>
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

Tagged as: resizeToContent