Resizing flex application in browser. How to set autoexpanding height

Question

I am developing small application for training purposes. There after click on the button is done, the new panel is added to application, to the button of the application. Once I come across strange problem. The vertical scroll bar never appears.

Here is how I embedded swf:

<script type="text/javascript" src="/site_media/js/swfobject.js"></script>
<script type="text/javascript">
  var flashvars = {};
  flashvars.siteurl = "http://";
  var params = {};
  var attributes = {};
  attributes.id = "plist";
  swfobject.embedSWF("/site_media/apps/submitproblemme.swf", "myAlternativeContent", "710", "700", "9.0.0","/site_media/apps/expressInstall.swf", flashvars, params, attributes);
</script>

Here is how I defined application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="ui.*" creationComplete="main(event)" width="730">

So after the click is done small panel is added to the bottom so my application must dynamically expand to the button (or at least create scroll bar).

Here is a screenshot: http://img.skitch.com/20100208-xhh1mi93acyn5y19r8r8spn974.png

Please help!

Answer 1

Hey, I've run into this problem myself.

The best thing to do here is to use the browser scrollbars. When your Application SWF gets larger than the browser viewport, you want the browser window to resize.

You can do that using this javascript library: SWFFit . Make your browser window 800x600 or so, and run this swffit example . It will make the scrollbars appear.

It works by resizing the object tag added by swfobject. You have to call those methods whenever you figure out your application has resized.

If you want to use the canvas scrollbars instead of the browser scrollbars, could you show the code you're using adding your panels to the application?

Answer 2

This is the easiest method. We no need another plugin/tool. In index.html file, within style declaration, paste following code,

html, body  {height:100%; width:100%; min-width:800px; min-height:600px; overflow:auto; position:absolute;}

i hope it should works.Scroll bar should appear if screen size less than 800X600. and also you can specify max-height as well as max-width, if you want.

Answer 3

Another that may or may not help you: Some containers have a "resizeToContent" property. I know viewStack has it. Might make life easier for you.