I have a list control that uses an array collection as a data provider. The array collection is initialized in actionscript. The list looks like this:
<mx:List width="500" id="activeMessages" styleName="messages" variableRowHeight="true" verticalScrollPolicy="off" horizontalScrollPolicy="off"
dataProvider="{activeMessageTitles}"/>
and the styleName .messages is like this:
.messages{
border-style:solid;
corner-radius:4;
border-color:#cccccc;
padding:0 0 0 0;
background-color:#DCDCDC;
margin-bottom:400px;
padding-bottom:120px;
}
The array collection is dynamically loaded with data and has been verified, so it does have the requisite data. The requisite data is just random words not sentences and do not exceed more than two words for any given Array.
var activeMessageTitles:ArrayCollection = new ArrayCollection();
The issue is in the formatting. The dataProvider does retrieve all the items and they are rendered in the list. The only problem being that the space between any two row items in the list is huge and it takes up an arbitrary amount of space. I would like the list items to be rendered right after the other instead of having a huge amount of space in the middle.
Can anyone specify what exactly has gone wrong here?
The problem sounds like virtualization. Lists recycle Item renderers and only use enough to display what is visible on screen. When you scroll, flex will take the renderer that just went out of view, and re-use it for the one coming into view. Depending oh how large the message was in the recycled renderer, it will still retain that large height… even if the new message being inserted into it is small.
To fix this, create an item renderer (tons of tutorials out there) and override its set data() method so you can resize the renderers to fit the new content.
see this link for full details:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html