Home/ Questions/Q 6370219
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:54:07+00:00

I have a container with a vertical layout inside which I have two other

  • 0

I have a container with a vertical layout inside which I have two other child containers “A” and “B”.

In the first container “A” there is a component that I would like to resize dynamically based on the available display size.
To to that I tried listening to the resize event of the main container and do my measures accordingly.
That works somewhat until the parent container reaches a clipping size : container “B” gets clipped earlier than “A” because it contains much more stuffs :
As soon as the parent container reaches “B”‘s clipping size, it does not resize anymore (so no more resize event either) thus preventing me from updating my component’s display in “A”.

Any directions would be much appreciated.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve got something like this (correct me, if I’m wrong):

    <mx:VBox>
    <mx:VBox id="A" width="100%" height="100%">
        <CustomComponent id="component" width="100%" height="100%"/>
    </mx:VBox>
    <mx:VBox id="B"/>
</mx:VBox>

    You don’t need to listen to resize events, Flex containers can resize automatically. Your resize layout behavior is reached by assigning proper size in percents for container A and your component. Here you have container A, which occupies all the free space provided by its parent – top container. Therefore your inner component occupies all the free space provided by its parent – component A. When top container resizes, its children will automatically resize themselves.

    In pure ActionScript the corresponding properties are percentHeight and percentWidth.

    UPD

    1) The problem with size of B is solved by adding minWidth="10" (or 0, or min size you want). That forces B to resize with parent container, even if there’s not enough space in parent.

    2) If you want to do some different layout in you custom component, or to make some calculations, based on new component size, you should override function “updateDisplayeList” in your custom component:

    override protected function updateDisplayList(unscaledHeight:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    // your calculations
}

    This function is called by Flex layoutManager, when the component needs to refresh its size and/or children positions. The arguments represent available space for component.

    More on Flex component lifecycle:

    3) Some sort of offtop.

    I’ve got a feeling, that you simply have VBox of Labels, and these Labels don’t want to resize with its parent. This problem is solved by assigning some small value to Labels’s minWidth – after that Labels will be correctly truncated if they exceed parent size.

    • 0