January 9, 2007

Left aligned label in FormItem

FormItem class doesn't have any styles or properties to control corresponding label alignment. Right alignment is applied by default and it's good idea to keep it "as is", because some usability researches say it's more friendly for user. Though if you want to make your FormItem label left aligned, use ExtendedFormItem class instead of regular FormItem:

ExtendedFormItem label is left aligned by default, but you can set labelAlign style to "right" if necessary.

13 comments:

Anonymous said...

This looks great. I'll study it closer to get a better feel for how I can modify it to put the labels ABOVE the contained component. Thanks.

Unknown said...

I will also investigate this issue.

Unknown said...

I am sorry to inform you on this issue, but some usability study actually had confirmed that right alighed labels have less cognitive overload on users

http://www.uxmatters.com/MT/archives/000107.php

Unknown said...

I am sorry to inform you on this issue, but some usability study actually had confirmed that right aligned labels have less cognitive overload on users

http://www.uxmatters.com/MT/archives/000107.php

Unknown said...

It seems that usability tends to be religion more than science. :)

Roman Protsiuk said...

The bad thing is that if you put a control like TextInput in this FormItem and give it a focus then your label won't be at either rawChildren.numChildren - 1 or rawChildren.numChildren - 2 (if required == true). It'll move to rawChildren.numChildren - 2 or rawChildren.numChildren - 3 respectively because there is focusPane at numChildren - 1. I assume other controls that add some sort of halo in special cases will change this situation too.
At the moment I have no good enough ideas to get itemLabel. But I'm thinking. Any help appreciated.

Unknown said...

Actually it's not a problem to refer FormItemLabel using mx_internal::labelObject and I will rewrite this class soon. Though referencing private indicatorObj is more challenging. I have some ideas regarding it, but they are not stable enough.

Roman Protsiuk said...

override protected function updateDisplayList(w : Number, h : Number) : void {
super.updateDisplayList(w, h);

if (label.length > 0) {
var labelAlign : String = getStyle("labelAlign");
var itemLabel : FormItemLabel = mx_internal::itemLabel;
var left : Number = viewMetricsAndPadding.left;

if (labelAlign == "left") {
itemLabel.move(left, itemLabel.y);

if (required) {
var indicator : IFlexDisplayObject;
var indicatorClass : Class = getStyle("indicatorSkin");

left += itemLabel.width;

for (var i : Number = rawChildren.numChildren - 1; i >= 0; i--) {
var child : DisplayObject = rawChildren.getChildAt(i);
if (child is indicatorClass) {
indicator = IFlexDisplayObject(child);
break;
}
}
indicator.move(left + ((getStyle("indicatorGap") - indicator.width) / 2), indicator.y);
}
}
}
}

Roman Protsiuk said...

You can find fixed and slightly improved version here.

Anonymous said...

I haven't been able to successfully change the formItem so that the labels are placed above the input controls. Any ideas?

Anonymous said...

Doesn't look like my last post went thru, so i'll post again.

I'd still like to be able to override the layout of the FormItems to display their labels above the input fields. Anybody got ideas / solutions?

Thanks,
Bruce

Anonymous said...

These comments have been invaluable to me as is this whole site. I thank you for your comment.

Adam Fortuna said...

Any luck looking into an ABOVE component? I was just trying to create one and started searching google out of frustration. If I can't find one I'll probably try to post one myself.