How can I fix list components that overrun to the side in Flex?

Question

So you've created a list and hooked it up to your data. But wait! Someone decided to enter, say WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW street as their address. Or named their kid John Jacob Jingleheimer Schmidt, and all of a sudden, your list has a bizarre scrollbar running across it, right in the middle of the component, where no human being would possibly want a scrollbar.

As someone who considers himself clever, I've tried setting the width of the individual list components. This fixes the immediate problem of the scrollbar, but now the overrun from the list has hid itself invisibly underneath the next list element.

Is there a sane way to deal with this so that the elements of the list will adjust themselves vertically to hold the content?

Answer 1

have you tried....

<mx:List variableRowHeight="true" />

Answer 2

VariableRowHeight seems to have been thought too late in Fx and it seems to confuse the scrollbar as well. There might be an interaction fix to this rather than a technical one: I would change the itemRenderer to use a Label component and have it render the long string with an ellipsis ( John Jacob Jin...), and then give the itemrenderers a tooltip with the whole name, so the whole name is visible when u roll over it.