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

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...

Answer 2

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.