Question

I have a problem with the width of a label and its container.
I have 1 panel to the right that will take as much space as it’s possible, on the left one VGroup, width 1 panel on top that will take the needed width for children and 1 panel on bottom that will have the same width as the left top panel.

On the top left panel there is a button that will change its width.
On the down left panel there is a label that will adjust its width to its container panel, that way, the label will make breakpoints to fit properly on its container.

It works correctly at start and resizes correctly when button’s width grow bigger. But when the button changes to a smaller width, the left panels and groups remain at the same size as before, so the left part only grow bigger when needed and never decrease its width.

<fx:Script>
    <![CDATA[
        protected function buttonClick(event:MouseEvent):void{
            button.width= 70+Math.random()*200;
        }
        protected function vgroupResize():void{}
    ]]>
</fx:Script>

<s:HGroup width="500" height="500">
    <s:VGroup id="vGroup" height="100%" resize="vgroupResize()">
        <s:Panel id="leftUp" title="left up" width="100%" height="100%" minWidth="1">
            <s:Button id="button" label="button" click="buttonClick(event)"/>
        </s:Panel>

        <s:Panel id="leftDown" title="left down" width="{leftUp.width}">
            <s:Label width="100%" text="nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan"/>
        </s:Panel>
    </s:VGroup>

    <s:Panel title="right" width="100%" height="100%"/>
</s:HGroup>

I’ve found 2 ugly solutions that always work, but I want the proper way or a less horrible way to do that.

One solution is setting leftDown.width= 1 the moment the button changes its width:

        protected function buttonClick(event:MouseEvent):void
        {
            button.width= 70+Math.random()*200;
            leftDown.width= 1;
        }

Other solution is removing the left bottom panel the moment the button changes its width and re-adding when VGroup is resized:

        protected function buttonClick(event:MouseEvent):void
        {
            button.width= 70+Math.random()*200;

            if(leftDown.parent!=null) vGroup.removeElement(leftDown);
        }

        protected function vgroupResize():void
        {
            if(leftDown.parent==null) vGroup.addElement(leftDown);
        }

I hope someone knows the proper way to do that.

Answer 1

my opinion is to make the vpanel width as bindable to button width like this

<s:HGroup width="500" height="500">
        <s:VGroup id="vGroup" width="{button.width + 2}" height="100%" resize="vgroupResize()">
            <s:Panel id="leftUp" title="left up" width="100%" height="100%" minWidth="1">
                <s:Button id="button" label="button" click="buttonClick(event)"/>
            </s:Panel>

            <s:Panel id="leftDown" title="left down" width="{leftUp.width}">
                <s:Label width="100%" text="nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan"/>
            </s:Panel>
        </s:VGroup>

        <s:Panel title="right" width="100%" height="100%"/>
    </s:HGroup>

This is quite simple than other.