Change column width in Flex Grid

Question

I'm using a mx.containers.Grid to layout some data, and the last column is a set of checkboxes. MXML Code snippet:

<mx:Grid width="95%" height="50%">
  <mx:GridRow id="row1">
    <mx:GridItem>
      <mx:Label id="label1" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue1" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox1" />
    </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow id="row2">
    <mx:GridItem>
      <mx:Label id="label2" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue2" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox2" />
    </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow id="row3">
    <mx:GridItem>
      <mx:Label id="label3" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue3" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox3" />
    </mx:GridItem>
  </mx:GridRow>
</mx:Grid>

Basically, I want the labels & text values to align however the Grid component sees fit. However, I'd like the checkboxes to be right-aligned. I've tried setting the width of the textValues to 100% and it does nothing. I don't want to use hard-coded pixel values/canvases/etc because it is important that this is easy to change/update.

Thank you for your help.

Answer 1

I found a solution, but it is kind-of a hack. But I'll post it for people who are having the same problem as I was:

<mx:Grid width="95%" height="50%">
  <mx:GridRow id="row1" width="100%">
    <mx:GridItem>
      <mx:Label id="label1" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue1" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox1" width="100%" horizontalAlign="right" />
    </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow id="row2" width="100%">
    <mx:GridItem>
      <mx:Label id="label2" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue2" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox2" width="100%" horizontalAlign="right"/>
    </mx:GridItem>
  </mx:GridRow>
  <mx:GridRow id="row3" width="100%">
    <mx:GridItem>
      <mx:Label id="label3" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:Label id="textValue3" ... />
    </mx:GridItem>
    <mx:GridItem>
      <mx:CheckBox id="checkBox3" width="100%" horizontalAlign="right"/>
    </mx:GridItem>
  </mx:GridRow>
</mx:Grid>

Basically, add 'width="100%"' to every GridRow, and then add 'width="100%" horizontalAlign="right"' to every GridItem you want to be right-aligned.

Answer 2

Try setting the width of the GridRow / GridItem to 100% as well.