Javier Julio

Enabling word wrap on a Flex 4 List component

Recently, Alex Harui blogged reminding Flex developers on how to have variable row height in a Flex 3 DataGrid or List with item renderers that contain multiline text.

To achieve the same in Flex 4 with the new Spark components takes a different approach. In this example we’ll use the Spark List so you’ll need to override the layout and set the alignment to “justify” as seen below:

View Code at GitHub (Gist)

The default layout for a List has “contentJustify” set (can be seen in ListSkin). Note that since we used a vertical layout in the example, for a horizontal layout it would have a “verticalAlign” property instead.

Below is a sample Application containing two List components. One using the default item renderer while the second one uses a custom one. The important thing to note about the custom item renderer is that the Label component has to have a set width (example uses 100%) when a layout is set. If using a layout like BasicLayout then a absolute position (top, right, left, bottom) will take care of wrapping the text.

View Code at GitHub (Gist)