Flex Combobox dropdown list alignment

Here you go. You know what a combobox is in general and in flex. Below is how you create a combobox in flex and it has lot of properties to set the aesthetics and functionality of combobox.



< ?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:dd="com.jusfortechies.controls.*"
				layout="absolute" >
	<mx:Array id="arr">
		<mx:Object label="One" />
		<mx:Object label="Two" />
		<mx:Object label="Three with longer width" />
		<mx:Object label="Four" />
		<mx:Object label="Five" />
		<mx:Object label="Six" />
		<mx:Object label="Seven" />
		<mx:Object label="Eight" />
		<mx:Object label="Nine" />
		<mx:Object label="Ten" />
	</mx:Array>
	
	<mx:HBox width="1000" height="100" horizontalAlign="center" 
	verticalAlign="middle">
		 <mx:ComboBox id="comboBox" dataProvider="{arr}" 
		width="100" dropdownWidth="200"/> 
	</mx:HBox>

</mx:Application>

ComboBox dropdown right aligned

When you click on the dropdown arrow of the combobox, the dropdown list will display. The dropdown containing the dropdown list is nothing but a PopUp created by ComboBox class when you click on the dropdown arrow and is positioned appropriately based on the x and y coordinates of the ComboBox. The Popup x is "x" value of ComboBox and y is "y" value of ComboBox minus the height of the ComboBox.


Observe the combobox and you will see the dropdown arrow positioned towards the right and the dropdown is displayed in right direction when the width of the dropdown exceeds the ComboBox width. But sometimes you may want to display the dropdown towards the left. Let me give you one scenario where this may be needed. Lets take a scenario where the combobox should be placed in the extreme right of the page and say for example you have the dropdown elements whose width is greater than the combobox width. Then in that case, the dropdown list width will be extended towards right and makes the values to be cut off the screen and no vertical scrollbar will be visible for the users to scroll the values. See the next picture and you will understand the problem.

ComboBox dropdown right scollbar cut off

How do we solve this issue? Flex 4 gives a solution by setting the property "layoutDirection" to "rtl" but this just will give you the mirror image of the combobox. Look at the picture below and this is how the combobox will appear when you set the property "layoutDirection" to "rtl".

ComboBox dropdown mirror alignment

Now if you dont want the mirror image of ComboBox but still want to set the dropdown list moved to left when the width of the dropdown is greater than the width of the Combobox, you can use the following logic and achieve the same.

  • Subclass "ComboBox" and override the function "downArrowButton_buttonDownHandler" function
  • 
    override protected function downArrowButton_buttonDownHandler(
    			event:FlexEvent):void
    {
    	super.downArrowButton_buttonDownHandler(event);
    	
    	var point:Point = new Point(0, unscaledHeight);
    	point = localToGlobal(point);
    	point = dropdown.parent.globalToLocal(point);
    	
    	/*When the dropdown is visible, we should not move the opened 
    	 *dropdown to left or right. This check is needed because, when 
    	 *the dropdown is visible (i.e., open), the dropdown is already 
    	 *positioned to left. Now when the user tries to close, this function 
    	 *gets triggered but the dropdown alignment should not happen as
    	 *the dropdown is getting closed, not opened. 
    	 */
    	if(dropdown != null && dropdown.x == point.x){
    		dropdown.move(dropdown.x-(dropdownWidth - width), dropdown.y);
    	}
    }
    
    
  • Use this subclass in place of "ComboBox" in your application and its done. The final combobox will look like below one.

ComboBox dropdown left aligned


So simple uh! Yes. You can download the example source code.

Download the example code.





blog comments powered by Disqus