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 …