Quick Tip: How to right-align the dropdown List in a ComboBox Component

If you’ve got a ComboBox off to the right of the stage, and the dropdownWidth is longer than the ComboBox itself, you may run into issues where the items in the ComboBox hang off of the stage.

For example, here’s a screenshot of a ComboBox on the right with its items cut off:

Bad alignment…. notice how the items are gone

Ideally, what you’d want is for the scrollbar to align directly under the right edge of the ComboBox, and the items to extend out horizontally as necessary:

To solve this, there’s a quick modification you can do to the ComboBox through inheritance:

package com.nerdabilly
{
	import fl.controls.ComboBox;
	import flash.geom.Point;

	public class RightCombo extends ComboBox
	{

		public function RightCombo()
		{
			// constructor code
		}
		override protected function positionList():void
		{
			super.positionList();
			
			list.x = parent.localToGlobal(new Point(this.x,this.y)).x + width - list.width 
			if(list.verticalScrollBar.visible){
				list.x -= list.verticalScrollBar.width;
			}
		}
	}

}

Once this is done, simply edit the Linkage for the ComboBox (in its Properties panel) so it points to com.nerdabilly.RightCombo instead of fl.controls.ComboBox.

Advertisements
  1. Leave a comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: