Indenting Flex Accordion header labels

A recent comment asked how you can indent the Accordion header text as setting the paddingLeft style wasn’t working as expected for them. Well, as it turns out, you need to set the paddingLeft style directly on the AccordionHeader style (Flex 2 and 3) or create a new style with paddingLeft style specified and use the headerStyleName style (Flex 3 only).

Full code after the jump.

The following example works in Flex 2 and Flex 3:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/indenting-flex-accordion-header-labels/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        AccordionHeader {
            paddingLeft: 130; /* pixels */
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            width="100%"
            height="100%">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

The following example works in Flex 3:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/29/indenting-flex-accordion-header-labels/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical">

    <mx:Style>
        .accHeader {
            paddingLeft: 130; /* pixels */
        }
    </mx:Style>

    <mx:Accordion headerStyleName="accHeader"
            width="100%"
            height="100%">
        <mx:VBox label="One" />
        <mx:VBox label="Two" />
        <mx:VBox label="Three" />
        <mx:VBox label="Four" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

Tagged as: headerStyleName