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/ 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’s
mx_internal var downArrowButton:Button

The MyDateField class

	import flash.geom.Point;

	import mx.controls.DateField;
	 * This class is a partial fix of
	 * if moves and shrinks the DateChooser popup
	 * @author Marilen Corciovei
	public class MyDateField extends DateField
		 * inhibit the functionality
		public var fix:Boolean = true;

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

		private function fixPosSize(event:DropdownEvent):void {
				var df:DateField = 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="" layout="absolute" width="291" height="150" xmlns:local="*">
			import mx.controls.DateField;
			private var doFix:Boolean = false;
		<mx:FormHeading label="Test date chooser"/>
		<mx:FormItem label="test date picker">
			<local:MyDateField fix="{doFix}" id="df"/>
				<mx:CheckBox id="cb" change="{doFix = cb.selected}"/>
				<mx:Button label="Submit"/>

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 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