TileList Padding and Grid Lines

As you might know, designers can come up with some pretty funky ideas that don’t always match up with the default functionality of the framework you’re using. The pro is that your app turns out fresh and unique. The bad is that you’re the one that has to make it work. Of course, that also might be why you have a job.

Recently I received a comp from a designer that looked more or less like this:

Grid TileList

If you analyze it a bit, you’ll notice it calls for padding around the internal contents of a TileList. This padding isn’t meant to surround each item renderer individually, but instead around all the visible renderers collectively. In the TileList component that comes with Flex, setting the built-in padding styles does the former. Doing the latter is a more difficult task.

The comp also shows grid lines, that is, lines separating the rows and columns of the item renderers. The lines not only cross through the item renderer area but through the padding to the edge of the TileList, minus the scrollbars. Unlike a DataGrid, TileList doesn’t provide any styles or properties to support this. Then again, if you know something I don’t, let me hear about it.

So here we go. I’ll save you the headache — you just kick back and enjoy. See the example here and right-click for the full source.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.