The items hover of DropDownList's itemRenderer

Question

I have a DropDownList and an itemRenderer for it on related skin. My itemRenderer's items are SWFLoader object which show the swf files in my DropDownList. Height of each row must be 27px, So I decreased the height and width of my SWFLoader object to make them fit in each row, and also set these atts:

verticalCenter="2" verticalAlign="middle"

to align them in each row. But as contents of my SWFLoader have different width/height, I have problem of item's mouse hovering which overlap each other. I also set these for my SWFLoader, but still no changes:

mouseEnabled="false" mouseChildren="false"

Here is a brief of my code:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true" 
            height="27" width="100%">
<fx:Script>
    <![CDATA[           
        override public function set data(value:Object):void{
            super.data = value;
            // rest of codes
        }           
    ]]>
</fx:Script>

<s:SWFLoader left="5" right="5"
             height="65"
             verticalCenter="2" verticalAlign="middle"
             mouseEnabled="false" mouseChildren="false" 
             source="{data}" smoothBitmapContent="true" />

Any advice?!

I'm not sure I understand what the problem is when you hover, maybe a screen shot would help. Also, you say you set the height of the renderer to 27, but then why does the SWFLoader inside the renderer have a height of 65? — Sunil D., Jun 07 '13 at 19:49
1) You can imagine it like this: You have 5 items in your dropdownlist. You keep your cursor on 2nd item, but highlight will show for 3rd one!! / 2) My generated SWFLoader contents have blank spaces top and bottom of shapes. So if I keep them '65' the shapes will shown correctly in each row, but if I make it '27' it will downscale whole content based of those bank spaces (for some reasons I can't remove those blank spaces) — borna, Jun 09 '13 at 09:55

score 0 · Accepted Answer · answered Jun 11 '13 at 08:51

The problem was that the SWFLoader was catching the mouse events. So I just placed it in a Canvas and set mouseChildren="false" for ItemRenderer. Also set scroll policies of Canvas to 0:

horizontalScrollPolicy="off" verticalScrollPolicy="off"

Now the SWFLoader does not catch the mouse events and hovering items in dropDownList do not overlap each others.

P.S: Thanks one of my colleagues to help me about :)

The items hover of DropDownList's itemRenderer

1 Answers1