DataGrid row padding?

Question

Trying to use a DataGrid to display two columns of data.
However, there is a lot of space between the rows making this
rather unattractive. Any thoughts or ideas?
<mx:DataGrid x="10" y="10" borderStyle="none"
sortableColumns="false" selectable="false" showHeaders="false"
fontSize="12" color="#000000" fontWeight="normal" width="392"
height="207">
<mx:dataProvider>
<mx:Object Label="Manufacturer" Value="General
Mills"/>
<mx:Object Label="Category" Value="Cereal breakfast
foods"/>
<mx:Object Label="Description" Value="Toasted whole grain
oat cereal with kid-friendly ring shape"/> <!-- with
kid-friendly ring shape -->
<mx:Object Label="Quantity" Value="425 g Box"/>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Label" headerText=""
textAlign="left" width="115"/>
<mx:DataGridColumn dataField="Value" headerText=""
textAlign="left" wordWrap="true"/>
</mx:columns>
</mx:DataGrid>

Answer 1

"Phrankie" <[email protected]> wrote in
message
news:go4tgo$jra$[email protected]..
>
quote:
Originally posted by:
ntsiii
> Did you look for that word ("padding") in the DataGrid
docs? Combine that
> with rowHeight, and I think you will be good to go.
>
> Tracy
>
> Nor have I found a way to lessen the distance between
the text baseline
> and
> the gridline directly below, but I sure would like to!
The datagrid rows
> are
> excessively tall in a number of my projects.
>
> Flex/CSS padding doesn't conform entirely to the normal
HTML/CSS since of
> the
> term. For instance, paddingBottom has a fixed lower
display limit, while
> paddingTop has no limitation.
>
> Additionally, some sort of inheritance causes my CSS
datagrid padding
> styles
> to affect the datagrid rows AND the header ... even when
I add a
> headerStyle
> with its own distinct padding values.
>
> This CSS works as expected, though originally I would
have expected that
> these
> padding values would not affect the header:
>
> DataGrid {
> paddingBottom: 10;
> paddingBottom: 10;
> headerStyleName: "mydataGridHeaderStyle";
> }
>
> /* However the follow declaration does NOT style the
datagrid?s header
> padding
> independently */
>
> .mydataGridHeaderStyle {
> paddingBottom:2; /*no effect */
> }
>
> Given the following declarations the heading responds as
expected ... but
> the
> datagrid rows only honor paddingTop.
>
> DataGrid {
> paddingTop: -4;
> paddingBottom: -5;
> }
>
> Perhaps the datagrid row refuse to honor negative
values, whereas the
> header
> complies.
>
> A little perplexed here.
>
> Suggestions?
That might be another manifestation of this:
http://flexdiary.blogspot.com/2008/06/using-css-typeselector-with.html
HTH;
Amy