Tuesday, January 22, 2008

Taming your combobox width

Recently I discovered that setting a combobox to width="100%" doesn't mean the combobox won't grow bigger than the width of its container. If the text cannot be completely displayed your combobox becomes wider than 100%. You can use the following construction to tame its width:

<mx:canvas id="cnvs" width="100%" resize="cb.width = cnvs.width">
  <mx:combobox id="cb" text="this is a rather long combobox text" />
</mx:canvas>

Simply add a canvas around the combobox and explicitly set the width of the combobox to the width of the canvas through the resize event of the canvas. This solution works because the problematic behaviour only occurs when using a percentage width.


The same applies to the Label component (and probably some other components as well).

7 comments:

Matt said...

Just wanted to say thanks for the workaround, it was hardcoding or this, and I'm much appreciative to not have to hard code anything. Fixed width is the devil!

Palmero Tom said...

I couldn't agree more :)

Reid said...

I've found that width="100%" minWidth="0" works in many cases, though I haven't tried it with a combobox. This would remove the dependency on "cnvs".

Unknown said...

If the ComboBox's width needs to be 100%, then that means there is already some sort of parent container, right? So, why not just set the ComboBox's width equal to the parent container's width like this:

width="{whateverTheParentIs.width}"

It'll force the same width as the parent and eliminate the need for an extra container.

Palmero Tom said...

The idea was to have a 'self-contained' solution without any reference to its parent. But your solution is definitely a nice alternative.

Reid said...

I think width="{whateverTheParentIs.width}" might not work reliably because Flex updates the width attributes at strange times.

Anonymous said...

width="100%" minWidth="0" works perfectly, thanks @Reid