CODEWITHSUNDEEP
apache-flexlistflex3itemrenderer
joejax
joejax

Reputation: 371

How to set variable size for List control item in Flex?

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.)

Upvotes: 0

Views: 1687

Answers (2)

bug-a-lot
bug-a-lot

Reputation: 2454

Try not setting the height on the VBox, and variableRowHeight to true on the list. Although I'm not sure how nice the List would play with that.

Alternatively, since you're not really using the advantage of itemRender recycling (because of rowCount = dataProvider.length) you might want to consider using a repeater instead of the list.

Upvotes: 1

drummondj
drummondj

Reputation: 1483

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>

Upvotes: 3

Related Questions