Fixing dateChooser position and size

As described here, the dateChooser positioning algorithm does not account for the overall size of the window and this results in some clipping of the dateChooser window for the DateField. Take a look at frameworks/projects/framework/src/mx/controls/DateField.as displayDropdown function. I’m trying here to provide a partial fix. The ideea:

  • trap the open event and reposition/resize the dateChooser. This can be done just by adding an event listener to the DropdownEven.OPEN event.
  • to avoid problems if the dropdown appears on top of the dropdown button I had to move the code inside a derived class to access the textInput object. Still no access to ComboBase.as’s
mx_internal var downArrowButton:Button

The MyDateField class

package
{
	import flash.geom.Point;

	import mx.controls.DateField;
	import mx.events.DropdownEvent;
	/**
	 * This class is a partial fix of http://bugs.adobe.com/jira/browse/SDK-10971
	 * if moves and shrinks the DateChooser popup
	 * @author Marilen Corciovei
	 */
	public class MyDateField extends DateField
	{
		/**
		 * inhibit the functionality
		 */
		[Bindable]
		public var fix:Boolean = true;

		public function MyDateField()
		{
			super();
			addEventListener(DropdownEvent.OPEN, fixPosSize);
		}

		private function fixPosSize(event:DropdownEvent):void {
			if(fix){
				var df:DateField = event.target as DateField;
				var p:Point = new Point(df.dropdown.x, df.dropdown.y);
				var pT:Point = new Point(textInput.x, textInput.y);
				pT = df.contentToGlobal(pT);
				if(p.y < 0){
					df.dropdown.move(p.x, 0);
				}
				var scale:Number = 1;
				if(df.dropdown.height > screen.height){
					scale = screen.height/df.dropdown.height;
					df.dropdown.scaleX = scale;
					df.dropdown.scaleY = scale;
				}
				if(p.x < pT.x){
					//if the dropdown on the left, make sure it does not cover the dropDownButton
					var ddRight:int = df.dropdown.x + df.dropdown.width;
					var textInputRight:int = pT.x + textInput.width;
					if (ddRight > textInputRight){
						//the 12 is just by trial and error ?! someone explain
						df.dropdown.move(textInputRight - df.dropdown.getExplicitOrMeasuredWidth()*scale + 12, df.dropdown.y);
					}
				}
			}
		}
	}
}

The tester:

<?xml version="1.0" encoding="utf-8"?>
<!-- Tests the MyDateField -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="291" height="150" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import mx.controls.DateField;
			[Bindable]
			private var doFix:Boolean = false;
		]]>
	</mx:Script>
	<mx:Form>
		<mx:FormHeading label="Test date chooser"/>
		<mx:FormItem label="test date picker">
			<local:MyDateField fix="{doFix}" id="df"/>
		</mx:FormItem>
		<mx:FormItem>
			<mx:HBox>
				<mx:CheckBox id="cb" change="{doFix = cb.selected}"/>
				<mx:Button label="Submit"/>
			</mx:HBox>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

How to test:

  • open the popup, it’s clipped
  • check the fix checkBox and open the popup again, now it’s visible even if scaled.

[flash http://www.len.ro/hidden/flex/testDateChooser/TestDateChooser.swf w=291 h=150]

I think there are still a lot of cases which should be considered and handled.

One Response

  1. Thanks! This is the exact problem I am running into currently and so will give this a whirl …

Leave a Reply

*