Question

How do I wordwrap in a spark list w/ an itemrenderer? This posting at http://blog.flexexamples.com/2009/10/27/setting-word-wrapping-on-a-spark-list-control-in-flex-4/ works 100% but when I try to set a separate item renderer, I can’t get the word wrapping…instead, I get an ugly horizontal scroll bar. HEre is my mxml:

<?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" width="100%"     
height="100%" 
           xmlns:mx="library://ns.adobe.com/flex/mx">

<s:List id="lst"
        useVirtualLayout="false"
        width="200"
        horizontalCenter="0" verticalCenter="0"
        itemRenderer="testRenderer"
        >

    <s:dataProvider>
        <s:ArrayList>
            <fx:Object />
        </s:ArrayList>
    </s:dataProvider>
</s:List>

</s:Application>

here is my testRenderer ————>

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="testRenderer"
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            autoDrawBackground="true"
            creationComplete="makeLabel(event);">
<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>

<s:layout>
    <s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>


<fx:Script>
    <![CDATA[

        protected function makeLabel(evt:Event):void {

        test.text = "this is just a really long line of text that I want to wrap and just look normal";

        }
    ]]>
</fx:Script>
<s:HGroup>  

    <s:Label id="test" color="black" />
</s:HGroup> 

</s:ItemRenderer>

Answer 1

try giving your Label (id=”test”) a width