Follow Skinkers.




AutoComplete component sizing.

  January 4th, 2010 | Flex | David Spanton

The Flex Components AutoComplete ( Link ) offers a great auto suggestion text input component, which often makes for a better experience than a combo box or list. What it didn’t do was resize quite how a wanted it to.

I was using the AutoComplete component as the auto-resizing part of a horizontal panel in an AIR application. When the window was resized by the user, the AutoComplete would enlarge or shrink to fit, down a minimum size set on the window.

The problem was that I couldn’t seem to get the AutoComplete to fit without scrollbars appearing. After a bit of digging I found the minimum width gets set to the longest item in the data provider in the measure method of ComboBase. This was exacerbated by the long items in the data provider I was using, forcing scroll bars onto any reasonable size of window.

Extending AutoComplete and overriding measure with the following fixes the problem, and hasn’t given me any issues so far.

override protected function measure():void
    measuredWidth = mx.core.UIComponent.DEFAULT_MEASURED_WIDTH;
    measuredHeight = UIComponent.DEFAULT_MEASURED_HEIGHT;

    measuredMinWidth = UIComponent.DEFAULT_MEASURED_MIN_WIDTH;
    measuredMinHeight = UIComponent.DEFAULT_MEASURED_MIN_HEIGHT;

By not calling super and setting the four properties above then the component takes on the default minimum width of 40 and re-flows as expected. Obviously some of the items in the drop down may be cut off, but the text in the input field is draggable, so it’s always possible to see all of it one way or another. A future improvement to this might be to include a tool-tip rollover to truncated drop down items.

I might improve this if I reuse the component in the future – maybe include some measurement logic similar to TextInput, or just some provision for borders and padding. In it’s current application it works though, so I might just leave well alone!

Tags: , ,

Leave a Reply