Flex: align Checkboxes horizontally, but Wrap To a New Line

Question

I have a form and one of the fields is a check-all-that-applies type field with several checkboxes under it. I need to display the checkboxes side by side, but since there are many, I want them to wrap to the next line.

I tried using HGroup inside the FormItem and around them all, but this displays them all on the same line without line wrapping.

<mx:FormItem>
  <s:HGroup>    
     <s:CheckBox content="item 1" />
     <s:CheckBox content="item 2" />
     <s:CheckBox content="item 3" />
     <s:CheckBox content="item 4" />
     <s:CheckBox content="item 5" />
     <s:CheckBox content="item 6" />
     <s:CheckBox content="item 7" />
     <s:CheckBox content="item 8" />
  </s:HGroup>   
</mx:FormItem>

I need them to display horizontally, but still wrap to the next line somehow. Any ideas?

Answer 1

You may want to check out the FlexLib library. They have a component called the FlowBox which I think will do exactly what you want it to. The only thing is that I'm not sure whether FlexLib is compatible with Flex 4 yet or not.

Answer 2

Try this:

<s:Group>    
    <s:layout><s:TileLayout/></s:layout>
    <s:CheckBox content="item 1" />
    <s:CheckBox content="item 2" />
    <s:CheckBox content="item 3" />
    <s:CheckBox content="item 4" />
    <s:CheckBox content="item 5" />
    <s:CheckBox content="item 6" />
    <s:CheckBox content="item 7" />
    <s:CheckBox content="item 8" />
</s:Group>   

Flex 4 let's you define layout on Groups inside the <layout> tag, and the <TileLayout> does what you want.