Category: Flex

Recently I was trying to figure out how to make the padding in the cells of a <mx:comboBox> smaller than the default. This proved to be much harder than I thought. But I eventually found a solution.

Here is what the default looks like:

Here is the code I came up with:

<mx:Script xmlns:mx="http://www.adobe.com/2006/mxml">
<!&#91;CDATA&#91;
import mx.controls.Alert;
import mx.core.Application;
import mx.events.DropdownEvent;
public var app:* = Application( Application.application );
private function comboBox_open(evt:DropdownEvent):void {
evt.currentTarget.dropdown.variableRowHeight = true;
}
&#93;&#93;>
</mx:Script>
<mx:ComboBox id=”myComboBox” dataProvider=”{mx.core.Application.application.bbapp.cityXML}” labelField=”NAME”
close=”app.closeHandler(event)” cornerRadius=”0? dropdownStyleName=”gameSelectBox” visible=”false” fontSize=”12? open=”comboBox_open(event);”>
<mx:itemRenderer>
<mx:Component>
<mx:Label text=”{data.NAME}” paddingTop=”-5? paddingBottom=”-5?/>
</mx:Component>
</mx:itemRenderer>
</mx:ComboBox>
</mx:HBox>

And here is the final output:

 

One Comment