16 Replies Latest reply on Sep 7, 2010 7:30 AM by Ben Danis

    Combobox, word wraps and variable heights

    Ben Danis

      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?

        • 1. Re: Combobox, word wraps and variable heights
          Flex harUI Adobe Employee

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

          in the skin.

          • 2. Re: Combobox, word wraps and variable heights
            BhaskerChari Level 4

            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

            • 3. Re: Combobox, word wraps and variable heights
              Ben Danis Level 1

              I do set the variableRowHeight in my _openComboBoxHandler and i have a custom item renderer that is a multiline textfield, the problem is not in the combo box, the problem is in the display of the combobox.  I have successfully managed to make it a multiline item if i set the height of it.  The problem is that i have to set this height and i can't reset the height based on the selected comboBox item.

               

              For example, when the combo box is displayed, it should display the prompt "select an answer" which is one line high therefore combobox.height is about 25 pixels (not set manually).  But if i select item 3 which has a value of "super long medical text that takes 3 lines to write" then the combobox should readjust its height to 75 pixels (3 rows).  I'm trying to read the custom textInput's height that i've added so that the combo box's height adjust itself to the selected answer, but still can't get it.  As if the combo box was a canvas with a button background.

              • 4. Re: Combobox, word wraps and variable heights
                Ben Danis Level 1

                I've created a sort of hack to get around this. I created a container with my comboBox and an item renderer (mouseEnabled=false), the combo box is set to 100% of the container.   So when i click on the combo box, i get the drop down and all, but the display for the selected item is exactly what i want it to be.

                 

                Only issue now is that with variableRowHeight, the list dropdown doesn't place itself very well.  If the combobox is quite low, the dropdown will place itself above but will be floating well above the top of the combobox. Any ideas how to accomodate this?

                • 5. Re: Combobox, word wraps and variable heights
                  Flex harUI Adobe Employee

                  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.

                  • 6. Re: Combobox, word wraps and variable heights
                    Ben Danis Level 1

                    I do, it's in the function (in my original posting).  If i don't set the height though, it only wants to scroll.

                     

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

                    list.height = list.measureHeightOfItems();
                    }

                    • 7. Re: Combobox, word wraps and variable heights
                      Flex harUI Adobe Employee

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

                      I recommend a custom factory.

                      • 8. Re: Combobox, word wraps and variable heights
                        Ben Danis Level 1

                        I've added a custom class as dropdown renderer now, It works fine in flex, but in IE, i have scrollbars (darn IE).  Any ideas?

                        • 9. Re: Combobox, word wraps and variable heights
                          Flex harUI Adobe Employee

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

                          Are they browser scrollbars or Flex scrollbars?

                          • 10. Re: Combobox, word wraps and variable heights
                            Ben Danis Level 1

                            They are flex scroll bars, they appear strictly in the dropdown.  here is the code i have for my custom list, if i don't have the listener on FlexUpdate, then it won't set the height correctly.  This will work in a swf, but not when on a webpage (IE and Firefox tested)

                            public function MCCustomDropDown()
                                    {
                                        super();
                                        variableRowHeight = true;
                                        filters = [new DropShadowFilter(4,45,0x333333, 1, 0, 0)];
                                       
                                    }
                                    override public function set dataProvider(value:Object):void {
                                        super.dataProvider = value;
                                        if (dataProvider)
                                            rowCount = dataProvider.length;
                                        addEventListener(FlexEvent.UPDATE_COMPLETE, _updateHandler, false, 0, true);
                                    }
                                    private function _updateHandler (e:Event):void {
                                        var previousHeight:Number = height;
                                        height = measureHeightOfItems();
                                        if (height == previousHeight)
                                            removeEventListener(e.type, _updateHandler);
                                       
                                    }

                            • 11. Re: Combobox, word wraps and variable heights
                              Flex harUI Adobe Employee

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

                              • 12. Re: Combobox, word wraps and variable heights
                                Ben Danis Level 1

                                I've added this to the height calculations

                                height = measureHeightOfItems() + viewMetrics.top + viewMetrics.bottom;
                                and also added an OnCreationComplete handler to measure the height as well.

                                • 13. Re: Combobox, word wraps and variable heights
                                  Ben Danis Level 1

                                  still not working.

                                  are lists and variableRowHeights supposed to be that awkward?

                                  • 14. Re: Combobox, word wraps and variable heights
                                    Ben Danis Level 1

                                    I've tried to keep my event listener (meaning it would remeasure on every frame) and it still does it, so the problem doesn't seem to be the list itself.  Would the popupManager be causing this?

                                    • 15. Re: Combobox, word wraps and variable heights
                                      Flex harUI Adobe Employee

                                      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.

                                      • 16. Re: Combobox, word wraps and variable heights
                                        Ben Danis Level 1

                                        The view metrics were always 0 when i tried to read them, but playing with screen calipers and a lot of logs while in the browser brought me to the discovery that the dropdown was scaled. so i changed the line

                                        height = measureHeightOfItems();

                                        to

                                        height = measureHeightOfItems() * scaleY;

                                         

                                        and the problem was solved.

                                         

                                        thanks for the help