5 Replies Latest reply on Sep 12, 2007 3:06 PM by zbob99

    How to stretch and shrink with browser resize

    zbob99 Level 1
      Is there a simple way to force stretch and shrink all components and text as the browser window resizes? I tried 100% width and height in the application tag but that only resizes the main container. I want to also resize eveything inside the main container and all the subcontainers including all text and all graphic objects. With SVG this was simple. I also tried the "Resize" effect but again that just resized the container and not the elements inside the container. Any suggestions would be greatly appreciated. Thanks.
        • 1. Re: How to stretch and shrink with browser resize
          JeffreyGong Level 1
          Hi zbob99,

          Instead of opening movie.html in web browser, you may try to open movie.swf directly like

          http://www.hostname.com/pathto/movie.swf

          Have fun!

          Jeffrey
          • 2. Re: How to stretch and shrink with browser resize
            jfillman Level 1
            Set top, bottom, left, and right instead of fixed or percentage height and width.
            • 3. Re: How to stretch and shrink with browser resize
              zbob99 Level 1
              Thanks for the suggestions but I still can't get this to work. Can someone send an example -- say you have a button inside of panel inside of another panel and you wanted the whole thing to shrink and stretch with browser window including the button and the text. Code below:

              <?xml version="1.0"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
              <mx:Panel title="Panel 1">
              <mx:Panel title="Panel 2">
              <mx:Button label="Submit"/>
              </mx:Panel>
              </mx:Panel>
              </mx:Application>

              Keep in mind that in my actual project I have several layers of containers and complex graphics and displays inside each. I don't want to have to make specific adjustments to each container and each componet. I was hoping there would just be a setting for the "mother container" that would apply to all the subcontainers and components inside them. Thanks.
              • 4. Re: How to stretch and shrink with browser resize
                jfillman Level 1
                Each child container is based on it's parent container. So if you set a child height and width to 100%, it will stick to the height and width constraints of the parent container. In other words, you have to set the constraints from the top most parent container, down to the bottom container and components. See this slight modification of your example below. Setting both panels to height/width = 100%, both panels resize accordingly as the window is resized.

                <?xml version="1.0"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="onResize();" resize="onResize();">

                <mx:Script>
                <![CDATA[

                [Bindable] public var thisWidth:Number;

                private function onResize():void{
                thisWidth = this.width;
                if (this.width >= 1020){
                pnl1.setStyle("fontSize", 10);
                }
                if (this.width < 1020 && this.width >= 500){
                pnl1.setStyle("fontSize", 8);
                }
                if (this.width < 500){
                pnl1.setStyle("fontSize", 5);
                }
                }
                ]]>
                </mx:Script>
                <mx:Panel title="Panel 1" width="100%" height="100%" id="pnl1" fontSize="10">
                <mx:Panel title="Panel 2" width="100%" height="100%">
                <mx:Canvas width="100%" height="100%">
                <mx:Button label="Submit" horizontalCenter="0" verticalCenter="0"/>
                <mx:Label text="{thisWidth}" right="10" bottom="10"/>
                </mx:Canvas>
                </mx:Panel>
                </mx:Panel>
                </mx:Application>

                Changing the font size is not as easy. All I can think of is setting the font size based on the current size of the window, as in my example above.
                • 5. How to stretch and shrink with browser resize
                  zbob99 Level 1
                  Thanks jfillman.

                  This sort of works but it will be a royal pain in my actual applications because I have multiple nested containers and dozens of objects and components. I don't understand why this is not a basic built in default feature. Vector graphics allows this by its very nature. SVG does this by default. Thanks for your help though. I do appreciate it. Cheers!