[flexcoders] Drop Down List Scroll Bar not working in DataGrid

[Stephen]

Here is my code, every time I click on the drop down list scroll bars it closes 
rather than scrolls. I've not had any answers to this problem. So if you can 
figure it out their is a heap of kudos for you.

Good luck!

** inbed.mxml **

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
minWidth="955" minHeight="600">
        <s:layout>
                <s:VerticalLayout horizontalAlign="center" paddingTop="10" 
gap="10"/>
        </s:layout>
        
        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                        
                        [Bindable]
                        protected var acPeople:ArrayCollection = new 
ArrayCollection(
                                [       { people_id: 1, people_name: 'Stephen', 
people_family:1},
                                        { people_id: 2, people_name: 'Sheila', 
people_family:1},
                                        { people_id: 3, people_name: 'David', 
people_family:1},
                                        { people_id: 4, people_name: 'Ross', 
people_family:2},
                                        { people_id: 5, people_name: 'Gareth', 
people_family:2},
                                        { people_id: 6, people_name: 'Joyce', 
people_family:2}
                                ]);
                ]]>
        </fx:Script>
        
        <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) 
here -->
        </fx:Declarations>      
        
        <s:Label text="People And Family Names" fontWeight="bold"/>
        <mx:DataGrid dataProvider="{acPeople}" rowCount="3" editable="true">
                <mx:columns>
                        <mx:DataGridColumn headerText="Index" 
dataField="people_id" editable="false"/>
                        <mx:DataGridColumn headerText="First Name" 
dataField="people_name" editable="false"/>
                        <mx:DataGridColumn headerText="Family Name" 
dataField="people_family" itemRenderer="render"
                                                           
rendererIsEditor="true" editorDataField="selection"/>
                </mx:columns>
        </mx:DataGrid>
        
</s:Application>

** render.mxml **

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"; 
                                                  
xmlns:s="library://ns.adobe.com/flex/spark" 
                                                  
xmlns:mx="library://ns.adobe.com/flex/mx" 
                                                  focusEnabled="true">
        
        <fx:Script>
                <![CDATA[               
                        import mx.collections.ArrayCollection;
                        
                        import spark.events.IndexChangeEvent;
                        
                        public var selection:int;
                        
                        [Bindable]
                        protected var acFamily:ArrayCollection = new 
ArrayCollection(
                                [       { family_id: 1, family_name:"Brown"},
                                        { family_id: 2, family_name:"Owen"},
                                        { family_id: 3, family_name:"Johnson"},
                                        { family_id: 4, family_name:"Harding"},
                                        { family_id: 5, family_name:"Manson"},
                                        { family_id: 6, family_name:"Philips"},
                                        { family_id: 7, family_name:"Hedge"}
                                ]);

                        protected function 
dropdownlist1_changeHandler(event:IndexChangeEvent):void
                        {
                                selection = event.newIndex;
                        }

                ]]>
        </fx:Script>
        
        <s:DropDownList dataProvider="{acFamily}" labelField="family_name" 
                                        
selectedIndex="{int(dataGridListData.label)}"
                                        
change="dropdownlist1_changeHandler(event)"
                                        width="100%" top="2" bottom="2" 
left="2" right="2"/>
        
</s:MXDataGridItemRenderer>