I'm adding simple chat functionality to an application I'm working on
and have the following List displaying messages:
<mx:List width="100%" height="85%" id="lstMessages"
itemRenderer="org.MessageRenderer"
variableRowHeight="true" dataChange="handleDataChange(event)"
dataProvider="{messages}">
</mx:List>
here's the event handler:
private function handleDataChange(e:FlexEvent):void{
lstMessages.scrollToIndex(lstMessages.rowCount -1);
}
the MessageRenderer is as follows:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%">
<mx:Text text="{data.fromName}" width="20%" id="lblUser"
color="{data.color}"/>
<mx:Text text="{data.message}" id="lblMessage" width="80%"
color="{data.color}"/>
</mx:HBox>
What I'm finding is that with variableRowHeight=true the last row in
the List is always rendered with virtually no height such that none of
the message text shows up. You can only see that it's there by
mousing over it to see that it does display a few pixels of height (a
border or padding perhaps?). When a new message is added, the
previously squashed row displays normally and the new row is now
vertically challenged.
With variableRowHeight=false each row displays normally (except that
text wrapping in the messsages doesn't work which is why I have it set
to true in the first place...). I tried adding a call to
lstMessages.invalidate() in handleDataChange but it had no effect.
One other item of note--with only a single message in the list it
seems to display OK.
Any ideas?
