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.

Comments:

Amanda -

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