Naveen
Naveen

Reputation: 141

Tile Layout not working with 100% width

I have a list with tile layout,I have given the item renderer's width as 100%, but the item dosen't resize to fit the content . The same scenario works well for horizontal and vertical layout.Is there any solution???..

My code looks like this

<s:List width="{this.width}" dataProvider="{allActionsArrList}">
 <s:layout>
  <s:TileLayout />
 </s:layout>
 <s:itemRenderer>
   <fx:Component>
     <s:ItemRenderer width="100%" height="40">
    <s:BorderContainer width="100%">
    <s:Label text="{data.name}" />

    </s:BorderContainer>
      </s:ItemRenderer>
    </fx:Component>
   <s:itemRenderer>
</s:List>

Thanks in advance!

Upvotes: 1

Views: 3816

Answers (2)

Hunternif
Hunternif

Reputation: 2392

Correct me if I am wrong, here is my I understanding of what you want to do:

You need the items in a List to evenly stretch horizontally occupying 100% width of the List. So if there's only 1 item, it occupies 100% width of the List. If there's an item too many (i.e. all items must be resized below their minWidth), the last item is moved to the next row.

Here's what you can achieve with TileLayout:

You can set columnWidth="{yourItemRendererMinWidth}" and columnAlign="justifyUsingWidth". This makes your TileLayout divide its rows evenly into columns with minimum width as yourItemRendererMinWidth. If a column exceeds List container's right edge, it is transferred to the next row, while all the previous columns in the row stretch to container's right edge.

However, there will be empty columns on the row (e.g. if there're 2 items with minWidth=100, and your List's width is 300, there will be one empty column). You'll have to programmatically adjust columnWidth or requestedColumnCount on your TileLayout if you have too few items.

Upvotes: 0

cliff.meyers
cliff.meyers

Reputation: 17734

Trying adding this to TileLayout:

TileLayout columnAlign="justifyUsingWidth"

Upvotes: 5

Related Questions