How to do padding inside <mx:List>?

Question

I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.

Something like this:

<mx:List id="List" selectionColor="red"     itemRenderer="renderers.List" 
     doubleClick="Handler()"  width="500" cornerRadius="4"  
      textAlign="center" height="335">

Also when mouse is rolled over only the item has to be highlighted excluding the padding.

Any suggestions? A sample code will be very useful.

Thanks

Answer 1

The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:List id="List" selectionColor="red" width="500" cornerRadius="4"  
     textAlign="center" height="335">
        <mx:Array >
         [1,2,3,4]
        </mx:Array>
     </mx:List>


</mx:WindowedApplication>

Are you rendering text or images?

As for the selection of only the item and not the extra space, I'm not too sure about that one.

Answer 2

You are looking for useRollOver for, well, adding roll overs.

<mx:List useRollOver="true" />

As for the padding, you will need to do that in a custom item renderer.

Here is a good article to help you get started on making a custom item renderer:

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html