Smaller ItemRenderer for a list

This post is about how to make a simple custom list item renderer, by extending the HBox, and decreasing its height so you can see more items…

 ApplicationSource

Making an ItemRenderer for the List Smaller

the key is in the renderer code… and setting the padding to be negative…

<mx:HBox> xmlns:mx="http://www.adobe.com/2006/mxml" paddingTop="-3" paddingBottom="-3" >

doing this makes me feel like i’m back doing css again with html hacks… but this is a simple way of accomplishing making the rows smaller in the  <mx:List> tag… one important side note is:

DON’T FORGET TO SET THE rowHeight=”14″ so it’s actually smaller… please view the source to check it out… it looks something like the following:

<mx:List>

dataProvider =”{acData}”

width =”100%”

height =”100%”

rowHeight =”14″

itemRenderer =”SmallListRenderer”

>

this didnt take long, but took a little trickery to get what i wanted

ApplicationSource

2 comments on this post.
  1. Ryan Phelan:

    Crazy dude, I just was solving this problem this morning. Also works to set variableRowHeight=true on the list.

  2. Bookmarks about Css:

    […] – bookmarked by 3 members originally found by finney75 on 2008-09-13 Smaller ItemRenderer for a list http://www.axelscript.com/2008/07/15/smaller-renderer-for-a-list/ – bookmarked by 2 members […]

Leave a comment