Layout questions about HDivideBox and HGroup

StackOverflow https://stackoverflow.com/questions/7245171

Question

I'm struggling with 2 layout problems when using HDivideBox in Flex 4.5:

enter image description here

  1. When I drag the vertical dividing bar to the left, the Label and the 3 RadioButtons on the top-left do not break in 2 rows. Instead the overlap with the Label on the top right. Is there please a way to make it more flexible.

  2. For some reason I can't drag the vertical dividing bar to the right anymore than at the screenshot above. And I need to do that a bit, so that 3 rectangles can be shown in the List on the left.

Below is my code, please advise me.

<mx:HDividedBox height="100%">

<s:VGroup width="100%" height="100%" horizontalAlign="justify">
    <s:HGroup verticalAlign="baseline">
        <s:Label text="Игровые столы:" />
        <s:RadioButton groupName="_group" label="Все" />
        <s:RadioButton groupName="_group" label="Свободные" />
        <s:RadioButton groupName="_group" label="Полные" />
    </s:HGroup>

    <s:List itemRenderer="Game" dataProvider="{_games}" height="100%">
        <s:layout>
            <s:TileLayout />
        </s:layout>
    </s:List>   
</s:VGroup> 

<s:VGroup width="100%" height="100%" horizontalAlign="justify">
    <s:Label text="Игроки в лобби:" verticalAlign="bottom" />
</s:VGroup> 

</mx:HDividedBox>
Was it helpful?

Solution

First part of the question. You can use some kind of flow layout instead of horizontal layout for your labels and radio buttons on the left side. For example this layout.

The second part is related to the min width of the container. Try to change it. Something like the following:

<mx:HDividedBox height="100%">

<s:VGroup width="100%" height="100%" horizontalAlign="justify">
    <s:HGroup verticalAlign="baseline">
        <s:Label text="Игровые стулья:" />
        <s:RadioButton groupName="_group" label="Все" />
        <s:RadioButton groupName="_group" label="Свободные" />
        <s:RadioButton groupName="_group" label="Полные" />
    </s:HGroup>

    <s:List itemRenderer="Game" dataProvider="{_games}" height="100%">
        <s:layout>
            <s:TileLayout />
        </s:layout>
    </s:List>   
</s:VGroup> 

<s:VGroup width="100%" height="100%" horizontalAlign="justify" minWidth="50">
    <s:Label text="Игроки в лобби:" verticalAlign="bottom" />
</s:VGroup> 

</mx:HDividedBox>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top