CODEWITHSUNDEEP
actionscript-3apache-flexlayout
Alex Smolov
Alex Smolov

Reputation: 1861

Absolute and Relative layout in Flex

Here is a simple layout question I don't know how to answer.

I have an HGroup that consists of three elements:

  1. Regular Flex Group that should stretch 50%;
  2. Button whose width is specified in px (say, 100px);
  3. Another Flex Group that should take the rest of the space.

The question is, what is the best way to tell my third element (Another Flex Group) to take all the free space?

Upvotes: 0

Views: 540

Answers (2)

Josh
Josh

Reputation: 8159

You can do it this way, but Jason Reeves's answer is much, much better and less likely to fail. The only real advantage to this method is that there are fewer H/VGroups, which are not that friendly on rendering (the layouts they use can lead to slow downs if you have a lot of them on the stage, or they have many children.) Regardless, I would use the other method over this one.

<s:HGroup id="rectContainer" width="100%" height="100%" gap="0">
    <s:Rect id="rect1" width="50%" height="100%"/>
    <s:Rect id="rect2" width="100" height="100%"/>
    <s:Rect id="rect3" width="{this.rectContainer.width - ( .5 * this.rectContainer.width ) - rect2.width}" height="100%"/>
</s:HGroup>

Upvotes: 1

Jason Reeves
Jason Reeves

Reputation: 1716

Here is what I would do to keep the 50% integrity

<s:HGroup width="100%">
    <s:Group width="50%" />
    <s:HGroup width="50%">
        <s:Button width="100"/>
        <s:Group width="100%" />
     </s:HGroup>
</s:HGroup>

EDIT: a little more explanation

setting the group width to 100% will make it stretch and take up whatever room is left (within the 50% on the right)

Upvotes: 3

Related Questions