Flex DateField TextInput Alignment Problem

Written by

I ran into a couple of problems with the DateField when I added a custom formatted date and removal of the border for the text input. I may have overlooked something here so if someone can suggest a more appropriate solution it would be welcomed.

(a) Text shifted up losing its central vertical alignment. (b) The calendar icon did not move horizontally as the text input data changed.

[caption id=”attachment_638” align=”left” width=”172” caption=”DateField Problems”]Text moves up and icon covers end of text[/caption]


Here is my solution:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

public class CustomDateField extends DateField
{
  public function CustomDateField()
  {
      super();
  }
      
  /**
    *  Override the measure method to adjust the textinput according
    *  to text line metric measurements.  Add a 30px padding to 
    *  accomodate the calender icon.  
    *  When the border of the textinput field is set to none then the
    *  text shifts up vertically and therefore loses its center 
    *  alignment.  I added a small calculation to realign to center.
    *  
    *     You will need to extend below logic to accomodate icon width 
    *  changes; 
    */
    override protected function measure():void
     {
         super.measure();
          
         // Calculate the size of the textInput using the text within control
               var lineMetrics:TextLineMetrics = measureText( textInput.text );            
          
               var w:Number = lineMetrics.width + 30;
               var h:Number = lineMetrics.height + 10;
            
               // Set the textInput width and height
               textInput.setActualSize( w, h );
            
               var alignTop:Number = ( ( textInput.height / 2 ) - ( lineMetrics.height / 2 ) ) / 2;
        
               textInput.y = alignTop;    
               // Adjust the actual width according to the calculate w value
               measuredWidth = w;   
           }
}

Fixed:

[caption id=”attachment_639” align=”left” width=”188” caption=”DateField problems fixed”]DateField problems fixed[/caption]

p.s. if someone has a better way to calculate alignTop then please offer it….

Comments