List itemRenderer text position

Question

Hello!
I have a list as depicted in the attached file.
The Image container has a max with and max height set to 100 and maintain the aspect ratio.
The first 10 are 100x75 because they are wide and it all looks good.
However, the last one which is square and so 100x100, overlaps the text.
If I was to set the text y right after the image ends, it would look bad for the first 10 images as the space would be too large.
I tried setting the text y to be imageContainer.contentHeight, but that doesn't work.
What would you do?
Thanks!

Answer 1

hi,
Here is a test app you can use to load images and 'play' with the renderer.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Image;
import spark.events.IndexChangeEvent;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
[Bindable] private var ImageCollection: ArrayCollection = new ArrayCollection();
private var fl:FileReferenceList=new FileReferenceList();
private var fr:FileReference = new FileReference();
private var ImageCount: int; 
private var ImageLoop : int;
private function loadImages(): void
fl.addEventListener(Event.SELECT, selectedImages);
var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
fl.browse([imagesFilter]);
private function selectedImages(e:Event): void
fl.removeEventListener(Event.SELECT, selectedImages);
ImageCount = fl.fileList.length;
ImageLoop  = 0;
loopList(0);
private function loopList(value:int): void
if (value < ImageCount)
fr = fl.fileList[value];
fr.addEventListener(Event.COMPLETE,getImage);
ImageLoop = ImageLoop+1;
fr.load();
else
imgList.dataProvider = null;
imgList.dataProvider = ImageCollection;
private function getImage(e:Event): void
fr.removeEventListener(Event.COMPLETE, getImage);
if (fr.data.length > 0)
var newData:Object = {
img: fr.data,
lbl: fr.name
ImageCollection.addItem(newData);
loopList(ImageLoop);
]]>
</fx:Script>
<s:List id="imgList" x="116" y="76" width="835" height="542" dataProvider="{ImageCollection}" itemRenderer="ImageRender">
<s:layout>
<s:TileLayout horizontalGap="3" verticalGap="3"/>
</s:layout>
</s:List>
<s:Button x="116" y="35" label="Button" click="loadImages()"/>
</s:Application>