Monday, January 19, 2009

FormItem label verticalAlign

As far as I've seen the label on FormItem's are always vertically aligned at the top. I have no idea why the Adobe guys didn't add the expected "verticalAlign" style to let the programmer choose where the label is positioned.

Anyways, I've extended the default mx.containers.FormItem control to add support for this style:
public class FormItemVerticalAlign extends FormItem 
{   
    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);   
        // vertically align (top by default)
        var verticalAlign:String = getStyle("verticalAlign");
        if (verticalAlign == "middle") {   
            itemLabel.y = Math.max(0, (h - itemLabel.height) / 2);
        } else if (verticalAlign == "bottom") {
            var padBottom:Number = getStyle("paddingBottom");
            itemLabel.y = Math.max(0, h - itemLabel.height - padBottom);
        }
    }  
}

E.g.
at

10 comments:

  1. AnonymousMay 9, 2009 at 1:23 AM

    Thanks very much! This saved me a lot of time.

    ReplyDelete
  2. PaulJuly 1, 2009 at 6:14 PM

    Wow, this is fantastic. Probably simple for experienced developers but it was exactly what I was looking for and gave me a great entrance into creating my own classes.

    ReplyDelete
  3. AryanJuly 21, 2009 at 6:26 AM

    Good one. Thanks Much.

    ReplyDelete
  4. AnonymousFebruary 8, 2010 at 11:13 AM

    Thanks, this is cool

    ReplyDelete
  5. Mother's InstinctMarch 24, 2010 at 2:43 AM

    Thanks this is what i was looking for!!!

    ReplyDelete
  6. DanOctober 19, 2010 at 1:52 AM

    Thanks mate! Saved me a lot of banging my head against the wall.

    How retarded is that of Adobe to not implement that? - It was driving me nuts. I thought I was going mental. LOL

    Thanks anyways!

    ReplyDelete
  7. AnonymousMarch 8, 2011 at 7:18 PM

    this may be looong overdue, but adobe didnt actually left this out. set labelStyleName to some style selector say: formLabelStyle

    then in the css declaration:
    .formLabelStyle {
    vertical-align:top;
    }

    or middle .. or bottom

    ReplyDelete
  8. AnonymousMarch 8, 2011 at 7:31 PM

    doesnt work :P

    ReplyDelete
  9. AnonymousMay 31, 2011 at 4:18 AM

    Works like a charm! I've been searching for hours for this, thank you!

    ReplyDelete
  10. Bionic1251July 6, 2011 at 9:16 AM

    You should have added
    [Style(name="verticalAlign", type="String", enumeration="bottom,middle,top",
    inherit="no")]
    before the class

    ReplyDelete