How can I create a Flex application with dynamic height?

Question

Is there a way to allow a flex application to have a dynamic height while embedded in an HTML wrapper?

I want the Flex application to grow in height in a way that it will not cause vertical scroll bars.

Answer 1

Unfortunately no, I think the only way you could do this is to get rid of the html wrapper in the first place. HTH.

Answer 2

I'm not sure I fully understand the question, are you trying to get the aplication to have a size larger than the browser's view port? If so, then as @hasseg commented and @RickDT mentioned, you can set the Application's horizontalScrollPolicy and/or verticalScrollPolicy properties to "off"?

If you're simply trying to make sure your application scales with changes to the browser's shape and size, then make sure you set the following (or values that suit) in your outer most application tag.

percentWidth="100"
percentHeight="100"

Answer 3

This is possible. For an example, see the new Kontain by fi. You can see it directly in action by creating a new blog post and adding lines to the entry field. As the entry field grows in size, the page gets taller.

You'll have to coordinate between Flash and Javascript via ExternalInterface. When your Flex app needs to change size, find the new size (probably by digging into Flex's layout engine) and throw that up to a Javascript function via ExternalInterface. The javascript then can set a new height property on the container. You'll probably also want to set verticalScrollPolicy="off" on your tag so that Flex doesn't show the scroll bars when the layout engine runs.

Answer 4

The best way should be overriding the Application's measure method like:

private var _lastMeasuredHeight:int;

override protected function measure():void
{
 super.measure();
 if (measuredHeight != _lastMeasuredHeight)
 {
  _lastMeasuredHeight = measuredHeight;
  if (ExternalInterface.available)
  {
   ExternalInterface.call("setFlashHeight", measuredHeight);
  }
 }
}

This function assumes that you have a javascript function named setFlashHeight which can accept a height (or whatever you name it) parameter. An example would be:

function setFlashHeight(newHeight){
 //assuming flashDiv is the name of the div contains flex app.
 var flashContentHolderDiv = document.getElementById('flashDiv'); 
 flashContentHolderDiv.style.height = newHeight;
}

I use swfobject to embed my flex applications. So the flash object resides inside a div. If yours not; the js function could easily be altered to set the flash object's height. When you implement this solution, you'll notice that scrollBars aren't working as flash consumes the event. But that's another subject...