Flex: vertical gap between list items not working - apache-flex

Question

I have a list item with buttons in it like so:
<mx:List contentBackgroundAlpha="0" baseColor="0x333333" leading="10" id="weekButtonList" width="260" borderVisible="false" dataProvider="{_data.mappoints.week.#number}" itemClick="onWeekClick(event);" >
<mx:itemRenderer >
<mx:Component>
<mx:Button buttonMode="true" width="260" height="50" label="Week {data}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
No matter what I do, these buttons have a vertical gap inbetween them. I have tried everything from setting the "vertical-gap" property to negative and positive numbers as well as changing the padding-bottom and padding-top on them. I want the buttons to be right up against eachother vertically. I have also tried "button-height" and padding on the List component...still nothing. How do I control this?

Answer 1

If you can build the project in flex4 rather than 3.x the following solution would apply:
in your application file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<s:List contentBackgroundAlpha="0" baseColor="0x333333" id="weekButtonList" width="260" borderVisible="false" itemRenderer="ListButton">
<s:layout>
<s:VerticalLayout gap="0">
</s:VerticalLayout>
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Array>
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="Still No Gap" />
</fx:Array>
</s:ArrayList>
</s:dataProvider>
</s:List>
in ListButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button label="{data.label}" />
If flex 4 is an option I highly recommend making the switch.

Answer 2

Try setting the button paddingTop and paddingBottom to 0

Answer 3

To add to greg's answer, some layouts use verticalGap and horizontalGap where applicable.
<s:List>
<s:layout>
<s:TileLayout verticalGap="-2" />
</s:layout>
</s:List>
I think the default is 0 (zero)