ninja captain

If you’ve ever tried to lower the rowHeight property of a DataGrid in Flex, you have probably noticed that if you lower the height too much, your text will get cut-off at the bottom. I’ve tried a number of solutions to correct this problem, but this one seems to be the best.

There are two properties addressed here: leading and paddingBottom.

leading: controls the bottom padding of the DataGrid header only.
paddingBottom: controls the bottom padding for all the DataGrid rows, AND the DataGrid header.

Thus, the solution is to lower the value for paddingBottom, and compensate by increasing the leading value.

for example:

1

<mx:DataGrid rowHeight="18" leading="4" paddingBottom="0">

By default, both of those settings are 2.

See the example below:
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
The rowHeight property of both DataGrid controls are set by the slider at the bottom. The DataGrid on the left has default values for leading (2) and paddingBottom (also 2). Those properties for the DataGrid on the right is controlled by the sliders.