Flex Spark: How to right align an icon on a button or tabbar button?

Question

Hello,

I would like to right align an icon on a button or tabbarbutton and keep the text left aligned in Flex 4.0 Spark.

So far, I've come up with something like the following in my custom skin:

<s:HGroup>
    <s:HGroup horizontalAlign="left">
        <s:Label id="labelDisplay"
                 textAlign="left"
                 maxDisplayedLines="1"
                 top="10">
        </s:Label>
    </s:HGroup>

    <s:HGroup horizontalAlign="right" bottom="5" right="0">
        <s:BitmapImage source="@Embed('assets/images/icons/close.png')" />
    </s:HGroup>
</s:HGroup>

But it seems silly to have an HGroup with 2 HGroup children just to get the horizontalAlign to the right.

Anyone know of a better way?

Thx, =Dave

Answer 1

You could set the width of the label to be 100%.

<s:HGroup>
    <s:Label id="labelDisplay" width="100%"/>
    <s:BitmapImage source="@Embed('assets/images/icons/close.png')" />
</s:HGroup>

If your buttons are all an explicit width, you could also try something like this:

<s:HGroup>
    <s:Label id="labelDisplay"/>
    <mx:Spacer width="100%"/>
    <s:BitmapImage source="@Embed('assets/images/icons/close.png')" />
</s:HGroup>