Strange behaviour when dynamically resizing Flash / Flex embed object

actionscript-3apache-flex

I have a simple Flex application that is a panel with a repeater inside of it; albeit a little simplified, it is like such:


<mx:Panel id="pnl">
    <mx:Repeater id="rp">
        <mx:Label text = "foo" />
    </mx:Repeater>
</mx:Panel>

I am then embedding this Flex application into an HTML wrapper. I am then attempting to dynamically re size the embedded Flash object in the HTML as the Flex panel changes size (thus allowing the Flex application to consume as much of the HTML page as it needs).

I am doing this by doing the following actionscipt:


pnl.addEventListener(ResizeEvent.RESIZE,function(event:Event):void {
    ExternalInterface.call("resize",event.target.height);
});

which in turn calls this javascript function:


function resize(height) {
    // the embed or object that contains the flex app
    var e = document.getElementById('flex_object');
    if(e) e.height = height;
}

This seems to work perfect in IE, however I get strange results in Firefox / Safari, the repeater works for n number of times, and then the text seems to get cut off / disappear in the repeater, see the attached image:
alt text http://img528.imageshack.us/img528/9538/rpre0.jpg

Can anyone explain why this is happening, and if there are any workarounds / ways of doing the same thing?

Best Answer

I'm currently working in the same thing (a swf that dynamically changes it's height depending on the content it's currently holding). I also had a similar problem to yours trying to make a multi-line button.

I'm new to flex but I managed to solve the problem manually invoking the updateDisplayList() of the container... I think it "forces" a render somewhere... it's parameters are the width and height of some area where the changes happen. Sorry for not knowing the details... But it worked for me.

Related Topic