6 Replies Latest reply on Aug 14, 2009 1:43 AM by Piotr Wierzgała

    combobox and its dropdown list

    Piotr Wierzgała

      How can I set space between combox and its dropdown list? I'd like dropdown list to appear like a 10px above combo box. Did anyone manage to do that?

        • 1. Re: combobox and its dropdown list
          JeffryHouser Level 4

          The DropDown is placed using the PopUpManager class ( http://livedocs.adobe.com/flex/3/langref/mx/managers/PopUpManager.html ).  You'll probably have to extend the ComboBox and modify the placement code that calculates the x and y values of the drop down.  I suspect you can probably write this code in the dropDown getter method; but UpdateDisplayList probably makes more sense.

           

          With the Flextras AutoCompleteComboBox, I've done a lot of work extending the ComobBox.  If you were looking to hire someone to do the development for you, Contact me off-list and we can work something out: http://www.flextras.com/?event=ContactForm

          • 2. Re: combobox and its dropdown list
            Piotr Wierzgała Level 1

            Thank you for your reply Jeffry. Extending ComboBox is what I was afraid about. I hoped that there exists some simple solution like atribute defining space between combo box and dropdown list.

             

            Anyway it's just a detail that may slightly improve my website appearance so I'll probably work on it later when I'll have more spare time.

            • 3. Re: combobox and its dropdown list
              JeffryHouser Level 4

              If you Google around, I have seen blog posts from folks who have modified the ComboBox to open up instead of down.  That approach may be a good starting point for your development.

               

              Based on a quick look, I'm pretty sure you would need to 'modify' the private method named displayDropdown; as that is where the drop down appears to be positioned.  (line 1573 in the Flex 3 SDK ).

               

              You can probably write code to move it in the getter method or updateDisplayList; but I'm not sure what visual anomalies that will produce.  Otherwise it looks like you might be stuck monkey patching. 

               

              Best of luck; let me know if I can help.

              • 4. Re: combobox and its dropdown list
                Piotr Wierzgała Level 1

                Ok, thanks again. I'll post here solution as soon as I figure it out.

                • 5. Re: combobox and its dropdown list
                  Piotr Wierzgała Level 1

                  Ok, I finally mange to do that. Here's my custom ComboBox component:

                   

                  package components {
                      
                      import mx.controls.ComboBox;
                      import mx.events.FlexEvent;
                  
                      public class CustomComboBox extends ComboBox {
                          
                          private var isOpen:Boolean = false;
                          public var dropdownDistance:int;
                          
                          public function CustomComboBox() {
                              super();
                          } //constructor
                              
                           override protected function downArrowButton_buttonDownHandler(event:FlexEvent):void {
                              if (isOpen) {
                                  close(event);
                                  isOpen = false;
                              } else {
                                  open();
                                  if (dropdown.y + 2*dropdown.height + this.height > screen.bottom) {
                                      dropdown.y = dropdown.y-dropdownDistance; //display above combobox
                                  } else {
                                      dropdown.y = dropdown.y+dropdownDistance; //display below combobox
                                  }        
                                  isOpen = true;
                              }    
                          } //downArrowButton_buttonDownHandler    
                                  
                      } //class: CusytomComboBox
                      
                  } //package: components
                  
                  • 6. Re: combobox and its dropdown list
                    Piotr Wierzgała Level 1

                    There was a bug in previous version that made you click twice into combox in order to display dropdown list after you select any opition from it. Here is update:

                     

                    package components {
                        
                        import flash.events.Event;
                        import mx.controls.Alert;
                        import mx.controls.ComboBox;
                        import mx.events.FlexEvent;
                    
                        public class CustomComboBox extends ComboBox {
                            
                            private var isOpen:Boolean = false;
                            public var dropdownDistance:int;
                            
                            public function CustomComboBox() {
                                super();
                            } //constructor
                                
                             override protected function downArrowButton_buttonDownHandler(event:FlexEvent):void {
                                if (isOpen) { //dropdon list is visible
                                    close();        
                                } else { //dropdown list is not visible
                                    open();    
                                    if (dropdown.y + 2*dropdown.height + this.height > screen.bottom) {
                                        dropdown.y = dropdown.y-dropdownDistance; //display above combobox
                                    } else {
                                        dropdown.y = dropdown.y+dropdownDistance; //display below combobox
                                    }        
                                    isOpen = true;
                                }    
                            } //downArrowButton_buttonDownHandler
                            
                            override public function close(trigger:Event = null):void {
                                super.close(trigger);
                                isOpen = false;
                            } //close
                            
                        } //class: CusytomComboBox
                        
                    } //package: components