Clever Geek Handbook

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.

+2


source to share


5 answers


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.

-1


source 


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>


+2


source


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.

+1


source


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

+1


source


Try textAlign on DataGridColumn.

0


source






More articles:


All Articles