Fill an HBox in from the right? VBox from the bottom?

actionscript-3, apache-flex, hbox

Solution

There is a `horizontalAlign` property, and a `verticalAlign` property, on the VBox and HBox components (it's inherited from Box). They determine the horizontal and vertical alignment of the component's children.

I generally use the Spacer object, like Sam mentions. But for what you want to do, this will work great.

In MXML you could do something like:

<mx:RadioButtonGroup id="yesNoRadioGroup"/>

<mx:HBox id="containingHBox" width="100%">
    <mx:Text id="textElement" width="200" text="lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj"/>
    <mx:HBox id="rightAlignedHorizontalContent" width="100%" horizontalAlign="right">
        <mx:RadioButton id="yesRadio" label="Yes" groupName="yesNoRadioGroup"/>
        <mx:RadioButton id="noRadio" label="No" groupName ="yesNoRadioGroup"/>
    </mx:HBox>
</mx:HBox>

Note that the HBox with the `horizontalAlign` set has to have a width value, otherwise, it will only be wide enough to accommodate the width of its children, in which case alignment is moot.

Here's an AS version:

<mx:Script>
    <![CDATA[
        import mx.controls.RadioButton;
        import mx.controls.RadioButtonGroup;
        import mx.controls.Text;

        private var containingHBox:HBox;
        private var textElement:Text;
        private var rightAlignedHorizontalContent:HBox;
        private var yesNoRadioGroup:RadioButtonGroup; 
        private var yesRadio:RadioButton;
        private var noRadio:RadioButton;

        override protected function createChildren():void
        {
            super.createChildren();

            containingHBox = new HBox();
            containingHBox.percentWidth = 100;

            textElement = new Text();
            textElement.width = 200;
            textElement.text = "lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj";

            rightAlignedHorizontalContent = new HBox();
            rightAlignedHorizontalContent.percentWidth = 100;
            rightAlignedHorizontalContent.setStyle("horizontalAlign","right");

            yesNoRadioGroup = new RadioButtonGroup();

            yesRadio = new RadioButton();
            yesRadio.label = "Yes";
            yesRadio.groupName = "yesNoRadioGroup";

            noRadio = new RadioButton();
            noRadio.label = "No";
            noRadio.groupName = "yesNoRadioGroup";


            addChild(containingHBox);

            containingHBox.addChild(textElement);
            containingHBox.addChild(rightAlignedHorizontalContent);

            rightAlignedHorizontalContent.addChild(yesRadio);
            rightAlignedHorizontalContent.addChild(noRadio);
        }
    ]]>
</mx:Script>

Problem

I only really need the HBox answer but figure that if we get a good answer in here it would help anyone trying to do a similar thing with a VBox. It would be nice to know this in both actionscript and MXML. So I have an HBox that I want some text aligned from the left and some radios from the right. Like so: ``` ___________________________________________________ | | |Text Yes () No() | |___________________________________________________| ``` I am currently doing this by having an invisible box with a width of 100% between the text and the radios, like this ``` _____ __________________________________ ________________ | | | | |Text | invisible box percentWidth=100; | Yes () No() | |_____|__________________________________|________________| ``` I would prefer to just have the radios in their own HBox that is right aligned like this: ``` _____ ________________________________________________________ | | | |Text | Yes () No() | |_____|________________________________________________________| ``` I've seen some posts talk about a horizontalAlign property, but I don't see it in the documentation anywhere. So how can I accomplish this? Thanks ~mike

Original source