Group gets height from original image, not the scaled 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?

Try this: <s:VerticalLayout horizontalAlign="justify" useVirtualLayout="false" variableRowHeight="true" /> — user1875642
Thanks for your response, but that didn't work, still got this huge gaps in the items of the group. Also, when I set the Image class to BitmapImage, it works, but then sometimes the image is not displayed (but the group is as big as the image). — user1515296

Pete TNT Pete TNT · Accepted Answer · 2013-06-25T06:54:29

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.

Group gets height from original image, not the scaled image

1 Answers