MXML: combobox width is larger than parent width

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 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.

Answer 2

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.