Joe Ludwig
Joe Ludwig

Reputation: 6866

Flex container with items of variable size

I need to display a horizontal list of images using Flex. I can't use a horizontal TileList because the tiles all end up the size of the first item. Is there a flex control that will allow me to have items with different sizes?

Edit: The list of items would ideally come from a data provider. Unfortunately the control in Chetan Sastry's answer only supports data providers if the items have a fixed width.

Upvotes: 3

Views: 2785

Answers (2)

Christophe Herreman
Christophe Herreman

Reputation: 16085

How about an HBox with a Repeater for your images?

Upvotes: 1

dkretz
dkretz

Reputation: 37645

Here's a code segment where I do what I think you're describing. The images are various sizes, but this displays them in a squared-up grid. The trick (at least for my requirements) is to set the height and minWidth for the container that goes into each cell.

<mx:TileList id="imgTiles" width="100%" height="100%"  
      paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2"  
      itemClick="eTilesClick(event)">     
    <mx:itemRenderer>  
        <mx:Component>  
            <mx:VBox horizontalAlign="center"  
                   height="250" minWidth="150"  
                   horizontalScrollPolicy="off" verticalScrollPolicy="off"  
                   borderColor="#D2D2D2" borderThickness="1"
                   borderStyle="solid">
                <mx:Label text="{data.imageCaption}" height="15" fontSize="10" fontWeight="bold"/>
                <mx:Image source="{data.thumbnailUrl}" width="100%"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

Upvotes: 1

Related Questions