Question

The following code display a list of comments using List control. The item height set to a fixed value (150), so it seems working: if the content is too long, the scrollbar shows…

However, what I really want is not to set the height but let it to change according to the content size. Is there any way to accomplish this?

        <mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
            rowCount="{commentSet.commentArrayColl.length}" >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox width="100%" height="150" >
                        <mx:Text text="{data.commentContent}" />
                        <mx:Text text="{data.username} ({data.modified})"/>
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:List> 

EDIT:
To be more clear, I don’t want to set the itemRenderer’s VBox height to “150” or any other fixed value – but it’ll only show one line of the text if I don’t do it. So I’m looking for a way out of this. (If the VBox is not inside the itemRenderer, it’ll auto ajust height as Text field string length grows – that’s what I want.)

Answer 1

Add a height property that binds a function of dataProvider.length * 150:

    <mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
        rowCount="{commentSet.commentArrayColl.length}" height={commentSet.commentArrayColl.length*150}>
        <mx:itemRenderer>
            <mx:Component>
                <mx:VBox width="100%" height="150" >
                    <mx:Text text="{data.commentContent}" />
                    <mx:Text text="{data.username} ({data.modified})"/>
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>