How do I fix this potential bug with the ComboBox Component in Flash?

Question

When I add a ComboBox component into a Sprite, the height of the container is larger than it should.

Here's what I mean:

import fl.controls.ComboBox;
//add combo box inside a container sprite
var combo:ComboBox = new ComboBox();
var container:Sprite = new Sprite();
addChild(container);
container.addChild(combo);
//draw the outline of the container sprite
container.graphics.lineStyle(1,0x009900);
container.graphics.drawRect(0,0,container.width,container.height);
//I don't get this:
trace(combo.height);//outputs 22
trace(container.height);//outputs 101

Note: You will need the ComboBox component in your Library. I'm using Flash CS3 for this.

If I invalidate/redraw, like this:

combo.invalidate(InvalidationType.ALL,true);
combo.drawNow();

the height changes from 101 to 104.

Any solutions ?

UPDATE: I've overwritten the configUI method in a ComboBox subclass, but the measurements are correct all the time. Why does the container height change to 100 ?

Answer 1

This is because of Adobe silly implantation of Flash components, if you look in the 2nd frame of a component inside a Flash IDEA you can see it's temporary avatar which returns the initial size.

to solve this you should iterate over the avatar children and normalize their size:

public static function normalizedComponent(component:Sprite):void {
    for (var i:int = 0; i < component.numChildren; i++) {
        component.getChildAt(i).height = component.height;
        component.getChildAt(i).width = component.width;
    }
}

usage:

var comboBox:ComboBox = new ComboBox();
normalizedComponent(comboBox);
normalizedComponent(comboBox.textField);

Answer 2

"if it is opened, then the height WITH the drop down box"

Hmm, I think when the list is added to the displayList below the button its actually added has a popup. So the height is supposed to remain the button height, since the sprite will never actually contain the drop-down list.

A possible reason the Container height could be wrong before it goes through any invalidation could be due to the children it contains. Maybe the combobox skin (could be a movieClip of 102px height) or a combobox sub-component that always start at 102px height or with weird height (TextField in a Button is known to be sometime wrong).

A simple solution would be to wait until a creationComplete/added event and see what is the final height, then draw the border.

Answer 3

I don't think this a ComboBox exclusive bug.

When I add a component Button to a Sprite container I also get different results when tracing the button and the container dimensions. Actually, I receive the same 100 x 100 results.

I would discard the drop down box possibility, since the Button component doesn't have one.

I think the workaround would be the same for the 2 components objects (ComboBox and Button), but I haven't found the solution just yet. Will update when I do.

UPDATE:

I was just able to get this working using validateNow(), and a few minutes later - I found the following link: http://forums.adobe.com/message/816912?tstart=0

Essentially, the link instructs us to put the validateNow() call inside an EnterFrame event, or inside a SetTimeout with proper timing.

Answer 4

So - I guess the displayed height of ComboBox is the actual height - id est, if it is opened, then the height WITH the drop down box, if not then WITHOUT. However - the items are STILL there, although with .visible set to false, which still expands the container, even if you can't see that... Therefore - I would say to do:

container.graphics.drawRect(0, 0, combo.width, combo.height);

That is the way to usually do it as well...

Answer 5

can you setup manually before this code:

container.width=100;

container.height=100;

container.graphics.drawRect(0,0,container.width,container.height);

Answer 6

Hi i found somewhere a solution for a similar problem with NumericStepper.

and the solution was:

var tInput:TextInput = numericStepper.getChildAt(2) as TextInput;
tInput.textField.height = 22; 

In your case try the following:

var tInput:TextInput = combo.getChildAt(1) as TextInput;
tInput.textField.height = 22;