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.

0 thoughts on “Resizing a Flex Accordion container to fit its contents

  1. Hi there!
    I’ve tried it with an Accordion holding TextArea(s) on each Canvas, but I’m having trouble with dynamic text because the height of the fields is variable and the Accordion doesn’t automatically fit them…

    Any clue?
    Thanks in advance. Quentin.