[flexcoders] TileList | ItemRenderer | Allignment is not proper

[ilikeflex]

Hi

I have tilelist which have checkboxs as itemrenderer. The tilelist has four 
columns and three rows. All the months are displayed in tilelist.Each month is 
represented by the check box.The problem i am facing is that checkboxs are not 
aligned properly.If you run the code below then months ( Mar,Jul,Nov are not in 
the single column ). Same is the case with (Jan,May and Sept) but Apr,Aug and 
Dec are displayed properly.



I have put lot of time but i cannot find the solution.

Any pointers ........
I am kind of stuck.....

Thanks
ilikelfex





<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" 
creationComplete="onCreationComplete()">
        
        <mx:Script>
                <![CDATA[
                        import com.ms.sow.crt.messages.util.MessagesConstants;
                        import mx.collections.ArrayCollection;
                        public function onCreationComplete():void
                        {
                                monthsTileList.dataProvider = 
getMonthListCollection();
                                monthsTileList.setStyle("useRollOver",false);
                                
monthsTileList.setStyle("selectionColor","#FFFFFF");    
                        }
                        
                        private function 
getMonthListCollection():ArrayCollection
                        {
                                var monthsCollection:ArrayCollection = new 
ArrayCollection(getAllMonths());
                                return monthsCollection;
                        }
                        
                        public static function getAllMonths():Array
                        {
                                var listArray:Array=[
                        {label: "Jan", value: "isJanuary"},{label: "Feb", 
value: "isFebruary"},
                        {label: "Mar", value: "isMarch"},{label: "Apr", value: 
"isApril"},
                        {label: "May", value: "isMay"},{label: "Jun", value: 
"isJune"},
                        {label: "Jul", value: "isJuly"},{label: "Aug", value: 
"isAugust"},
                         {label: "Sep", value: "isSeptember"},{label: "Oct", 
value: "isOctober"},
                         {label: "Nov", value: "isNovember"},{label: "Dec", 
value: "isDecember"}];
                          
                     return listArray;     
                        }
                ]]>
        </mx:Script>
        <mx:VBox width="30%" height="50%">
                <mx:TileList id="monthsTileList" rowCount="3" width="100%" 
minWidth="200"
                                        columnCount="4" 
itemRenderer="com.ms.sow.crt.messages.view.MonthsCheckBox" 
direction="horizontal"/>     
        </mx:VBox>
        
                                        
</mx:Application>

----------------------------------------------------------------------
ItemRenderer


package com.ms.sow.crt.messages.view
{
        import flash.events.Event;
        
        import mx.controls.CheckBox;
        [Event(name="monthChange", type="flash.events.Event")]
        public class MonthsCheckBox extends CheckBox
        {
                public function MonthsCheckBox()
                {
                        super();
                        addEventListener(Event.CHANGE,onChange);
                }
                
                override public function set data(item:Object):void
                {
                        if ( item )
                        {
                                super.data = item;
                                this.selected = item.selected;
                        }
                }
                
                private function onChange(event:Event):void
                {
                        dispatchEvent(new Event("monthChange",true));
                }
        }
}