Removing Padding Between a Flex List and Its Item Renderers

While working on an AIR client, I had a design comp that required a line divider below each item renderer in a Flex List component. The List component has a style for alternating item colors but not for adding a line divider between each item renderer. I figured it shouldn’t be that hard because I can simply add a bottom border on the container used for the item renderer.

I’m using a Canvas so the top portion of my MXML item renderer looked like:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
borderColor="#dedede" borderSides="bottom" borderStyle="solid">
...
</mx:Canvas>

Easy, but not quite there. You see the Flex List component seems to add some default spacing around the left and bottom parts of each item renderer from the List edge. You can see this in the following screenshot (I’ve changed the colors so the edges stand out):

As you can see, there is whitespace between the left edge and the starting point of the border and our selection highlight seems to be out of place. This is undesirable but there is an easy fix. It seems the List component has some default left and bottom padding set, so simply override it with nothing. Here I’m setting the rules globally to all List components, but you can replace it with the style name for a specific one if needed:

List {
padding-bottom: 0;
padding-left: 0;
}

After applying that snippet of CSS, we now have an item renderer where the selection highlight is in line with the left edge of the List and the next item. You can see the result below: