DropDownList ScrollBar Problem in DataGrid

[criptopus]

Here's my problem, as soon as I make the datagrid editable so that the selection can be passed from renderer to datagrid the scroll bars in the dropDownList fail to work. What can be done, nobody seems to know. If you know please let everyone know.

** app.mxml **

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="[URL unfurl="true"]http://ns.adobe.com/mxml/2009"[/URL]
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" editable="true"/>
</mx:columns>
</mx:DataGrid>

</s:Application>

** render.mxml **

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="[URL unfurl="true"]http://ns.adobe.com/mxml/2009"[/URL]
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>