How to force a resize from a child to a parent

Question

I have a page-like flex application. In my main application is a holder (a canvas) that displays all the pages. The problem is that the components that are loaded inside the holder are bigger than the holder is when the main application starts. The holder height is set to 100% but still he gets scrollbars when I load a bigger component inside of him then himself.

How can I solve this problem? And if it isn't solvable would it work correct if I use a viewstack?

--update---

the holder looks like this:

<mx:canvas height="100%">
</canvas>

But the end of the application is 500 pixels lower so canvas height is 500 pixels high. Now I put a new child inside the holder that is 1000 pixels high. Now the holder hight should be 1000 pixels high

Answer 1

Prior to adding the component to the main canvas check the size of the child component to see if its bigger than the parent. If it is then you can use scaleX and scaleY on the object to scale it down to fit in your defined area.

What you declared in your question is the default behavior for any flex container... put larger things in it and you'll get scrollbars. To eliminate the scrollbars use:

horizontalScrollPolicy="off"
verticalScrollPolicy="off

Edit:

Use "resizeToContent" on a tabNavigator or viewStack... or you can bind the width of the parent container to the width of the current child.

Answer 2

This is some code I was playing around with for an auto sizing canvas

// save as AutoResizeCanvas.as

package
{
    import mx.containers.Canvas;
    import mx.core.Container;
    import mx.core.UIComponent;

    public class AutoResizeCanvas extends Canvas
    {
     public function AutoResizeCanvas()
     {
      super();
     }

     override protected function measure():void
     {
      super.measure();
      var nh:int = 0;
      var nw:int = 0;
      for( var n:int = 0; n< this.numChildren; n++)
      {
       var c:UIComponent = this.getChildAt( n) as UIComponent;
       if( c is Container)
       {
        var cc:Container= c as Container;
        nh += /*cc.viewMetricsAndPadding.top + */cc.viewMetricsAndPadding.bottom + c.height;
        nw = Math.max( nw, cc.viewMetricsAndPadding.left + cc.viewMetricsAndPadding.right + c.width);
       } 
       else
       {
        nh += c.height;
        nw = Math.max( c.width, nw);
       }
      }
      this.measuredWidth = nw;
      this.measuredHeight = nh;
     }
    }
}

// test code, paste into your project's main mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:Script>
     <![CDATA[
      import mx.containers.Panel;
      import mx.containers.HBox;
      private function addOne():void
      {
       var hb:Panel = new Panel();
       hb.height = 100;
       hb.width = 100;
       hb.y = rc.numChildren * 110;
       rc.addChild( hb);
      }
     ]]>
    </mx:Script>
    <local:AutoResizeCanvas id="rc" verticalScrollPolicy="off" borderStyle="solid"/>
    <mx:Button x="497" y="10" label="Add HBox" click="addOne()"/>
</mx:Application>