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).
skip to main |
skip to sidebar
Sorry - I'm addicted. But I shouldn't be ashamed: I'm addicted to Adobe Flex - the solution that we should have had 10 years ago. If that would have been the case the internet would look completely different today. But don't worry: in 10 years from now it WILL look completely different :)
7 comments:
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!
I couldn't agree more :)
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".
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.
The idea was to have a 'self-contained' solution without any reference to its parent. But your solution is definitely a nice alternative.
I think width="{whateverTheParentIs.width}" might not work reliably because Flex updates the width attributes at strange times.
width="100%" minWidth="0" works perfectly, thanks @Reid
Post a Comment