Skip navigation
Ben Danis
Currently Being Moderated

Combobox, word wraps and variable heights

Aug 30, 2010 12:06 PM

I am trying to make a combo box with variable height items which i have managed to do by writing this:

<comboBox:MCComboBox
            id="comboBox"
            prompt="{_prompt}"
            maxWidth="{container.width}" 
            itemRenderer="{new ClassFactory(MCComboBoxItemRenderer)}"
            dataProvider="{_dataProvider}"
            change="_updateAnswerVO(event)"
            open="_openComboBoxHandler(event)"/>

private function _openComboBoxHandler(e:DropdownEvent):void {
                var list:List = e.currentTarget.dropdown
                list.wordWrap = true;
                list.variableRowHeight = true;
                list.height = list.measureHeightOfItems();
            }

 

This is being displayed properly.  With some minor glitches for the positioning and the height of the dropdown.

 

The problem is with displaying this selected item

i've created a custom combo box that uses the item renderer class as its display instead of textInput

 

protected var textInputReplacement:UIComponent;
           
            override public function set itemRenderer(value:IFactory):void {
                super.itemRenderer = value;
                createChildren();
            }
            override protected function createChildren():void {
                super.createChildren();
               
                if ( !textInputReplacement ) {
                    if ( itemRenderer != null ) {
                        //remove the default textInput
                        removeChild(textInput);
                       
                        //create a new itemRenderer to use in place of the text input
                        textInputReplacement = itemRenderer.newInstance();
                        textInputReplacement.mouseEnabled = textInputReplacement.mouseChildren = false;
                        BindingUtils.bindProperty(textInputReplacement, "data", this, "selectedItem", true);
                        addChild(textInputReplacement);
                    }
                }
            }
            override public function set prompt(value:String):void {
                super.prompt = value;
            }
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
               
                if ( textInputReplacement ) {
                    textInputReplacement.width = unscaledWidth;
                    textInputReplacement.height = unscaledHeight;
                }
            }
            override public function set selectedIndex(value:int):void {
                super.selectedIndex = value;
                if (textInputReplacement && textInputReplacement.height)
                    height = textInputReplacement.height;
            }

 

The problem is I can't get the height of the combobox to adjust itself based on the selected answer since it seems to be a fixed height, how can i set it to the actual itemRenderer's height and not the container's?

  • Currently Being Moderated
    Adobe Employee
    Aug 30, 2010 2:34 PM

    Is this Flex 4?  You may have to set variableRowHeight=true on the Dropdown

    in the skin.

    |
    Mark as:
  • Currently Being Moderated
    Community Member
    Aug 30, 2010 10:36 PM

    Hi ,

     

    Try the below line of code to wrap the Text in the ComboBox..._openComboBoxHandler() function...

     

    e.currentTarget.dropdown.variableRowHeight = true;

     

    I think you are already using the above line of code in your function...In addition to this add an itemRenderer for your ComboBox in which it is having the

     

    <mx:Text /> control as the root tag...and specify the width for the Text..then the text will be wrapped in your ComboBox..

     

     

    Thanks,

    Bhasker Chari

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Aug 31, 2010 10:15 AM

    I still think you need to set variableRowHeight on the dropDown in Flex 4,

    or in Flex 3, supply a custom dropDownFactory which is a List with

    variableRowHeight=true.  That way it should get measured and positioned

    correctly.

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Aug 31, 2010 11:29 AM

    But it looks like you're setting that in the OPEN event which is too late.

    I recommend a custom factory.

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Sep 3, 2010 10:52 AM

    Are the scrollbars always visible or only when the dropdown is displayed?

    Are they browser scrollbars or Flex scrollbars?

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Sep 3, 2010 11:13 AM

    Usually you have to factor in viewMetrics.top and bottom.

    |
    Mark as:
  • Currently Being Moderated
    Adobe Employee
    Sep 3, 2010 1:59 PM

    I don't think there is any code looking to compensate for late-breaking

    information about height.  The height is checked at the time it is popped up

    and that's it.  You will probably need to get the exact measurements early

    which will mean calling measureHeightOfItems and factoring in viewMetrics.

    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points