Flex - vertically aligning cells in a Datagrid
I am having problems vertically aligning text within cells in a DataGrid in Flex. I tried this.setStyle ("vertical-align", "middle") on the itemRenderer on the column, but it doesn't seem to work ... I also tried verticalAlign.
It looks like flex doesn't support it natively, but I found a hack to work this.
Make the cells inherit from Box and place the label inside the box. Then you can set verticalAlign = "medium" in the box.
try use <s:HorizontalLayout verticalAlign="middle">:
<s:GridColumn headerText="Action" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" paddingLeft="5"/>
</s:layout>
<s:Button label="View" click="outerDocument.view(event)" />
<s:Button label="Unlink" click="outerDocument.unlink(event)" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
The mx: Text and TextField controls do not directly support the verticalAlign style.
The easiest way would be to align the contents of your container eg. container.setStyle("verticalAlign", "bottom")
or so.
If the container is using an absolute layout, you can set one of the top, bottom, left and right styles to 0
to align appropriately.
Use the VerticalAlign DataGrid property (set to "medium")
verticalAlign: render vertical alignment in line
http://www.adobe.com/livedocs/flex/2/langref/mx/controls/DataGrid.html#styleSummary
Try textAlign on DataGridColumn.