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
			list.x = parent.localToGlobal(new Point(this.x,this.y)).x + width - list.width 
				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.

  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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

  • Least-Old Tweets

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.

%d bloggers like this: