2 Replies Latest reply on Aug 11, 2010 11:20 AM by stephanoc

    Getting a TileGroup to center its children

    stephanoc

      I'm just trying to get my buttons in the center of the row:

       

       

      <s:TileGroup horizontalAlign="center" width="100%">
        <s:Button label="Hello"/>
        <s:Button label="World"/>
      </s:TileGroup>
      

       

       

       

      Any ideas why this doesn't work?  Clearly I'm missing something.

       

       

       

      I found a hacky way get what I need.

       

       <s:VGroup width="100%" horizontalAlign="center">
       <s:TileGroup width="400">
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       <s:Button label="Hello"/>
       <s:Button label="World"/>
       </s:TileGroup>
       </s:VGroup>
      

       

       

      As you can see this gives me a row of buttons that will be centered on the page.  I have to hard code the width though (here it is set to 400).  This isn't all that great as I'd rather just have the container figure out how big it is and place the buttons in the middle.

       

      This hack breaks down when there are fewer buttons.  2 buttons, for example, still look similar to the first screenshot; pushed over to the left.