MXML: combobox width is larger than parent width - apache-flex

Question

I have a combobox with a width set to 100%. However, when one of its elements is larger, the combobox grows larger aswell, creating scrollbars and other uglyness in my app!
How do I keep the combobox contained within its parent?
NB it's OK if the list that drops down is larger as long as the closed combobox stays smaller.
Sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
<mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
<!-- This label should align with the labels in the left form -->
<mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
<!-- This textbox should spread accross both forms, that's why it's in a seperate HBox -->
<mx:TextInput height="20" width="100%" />
</mx:HBox>
<mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">
<mx:Form id="leftForm" width="50%">
<!-- Personal details -->
<mx:FormHeading label="Personal Details" width="100%" />
<mx:FormItem label="First name" width="100%">
<mx:TextInput text="{person.firstName}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Last name" width="100%">
<mx:TextInput text="{person.lastName}" width="100%"/>
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
<mx:Form id="rightForm" width="50%">
<!-- Address -->
<mx:FormHeading label="Address" width="100%" />
<mx:FormItem label="Street" width="100%">
<mx:TextInput text="{person.address.street}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="City" width="100%">
<mx:TextInput text="{person.address.city}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Country" width="100%">
<!-- This combobox right here is the troublemaker. There's a
country named 'South Georgia and the South Sandwich
Islands' consising of a few small islands in the southern
pacific and a name which is too long for my innocent
unsuspecting combobox -->
<form:ComboBox id="countryCombo" height="20" width="100%"
dataProvider="{model.systemDataModel.countries}" />
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
</mx:HBox>
</mx:Canvas>

Answer 1

You might be able to use minWidth instead. Set it to zero or some other low value. I know it works with containers like HBox and VBox to make them stop growing larger than their parent container, so it might work with ComboBox too. Basically, what happens is that minWidth="0" overrides the measuredMinWidth, which is a value that the parent container normally respects as the minimum possible size, and it may be bigger than the container's own bounds.

Answer 2

I had the same issue and I solve it easily. I had a country comboBox and a state comboBox components and dynamically filled with country names and the other with states related... I had two forms inside an HBox to show "two columns like" forms and inside the right side form there was a formItem and inside the formItem the comboBox. The problem was when I gave the comboBox its dataProvider then scrollBars appeared and it was very disgusting...
The solution: I show you just the right form because it was the problem (autoLayout="false" in Form and minWidth="0" in ComboBox definition)
<mx:Form autoLayout="false" verticalGap="12">
<mx:FormItem label="Country" required="false" width="100%" direction="vertical">
<mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
<mx:FormItem label="State" required="false" width="100%" direction="vertical">
<mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
</mx:Form>

Answer 3

You can use the maxWidth attribute with an absolute size (in pixels) however part of the combobox items ( which are larger then the combobox ) will be cropped .
from adobe :
combobox default size :
Wide enough to accommodate the longest entry in the drop-down list in the display area of the main control, plus the drop-down button. When the drop-down list is not visible, the default height is based on the label text size.