Group gets height from original image, not the scaled image - image

Question

In my app I import a twitter timeline. Some tweets contain images, some don't. Also the height of the imqages is variabel. I have a set width of 90% to make sure the images fit in the group (with a vertical layout), but no matter what I do, the group gets it's height from the original image, not the scaled height. I tried setting variableRowHeight="true", but that doesn't seem to do anything.Here is some sample code:
<s:List id="list" y="0" width="90%" height="954" dataProvider="{tweets}" horizontalCenter="0">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group width="100%">
<s:Label id="twitlabel" text="{tweetImage.height}"
width="100%"
styleName="tweetlist"/>
<s:Image id="tweetImage" y="{twitlabel.height}" width="90%" horizontalCenter="0" scaleMode="letterbox" smooth="true" source="{data.entities.media[0].media_url}"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
The question is, how can I get the group to set it's height to the scaled image height?

Answer 1

First set the "complete" event handler for your Image and an id for your Group:
<s:Group id="tweetImageGroup" width="100%">
<s:Image id="tweetImage" y="{twitlabel.height}" horizontalCenter="0" scaleMode="letterbox" smooth="true" source="{data.entities.media[0].media_url}" complete="tweetImage_completeHandler(event)"/>
Then set the width after the image has completed loading:
protected function tweetImage_completeHandler(event:Event):void{
tweetImageGroup.height = event.currentTarget.measuredHeight;
}
This might need some adjusting but should work if I understood your problem correctly.