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:
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.
I will also investigate this issue.
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
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
It seems that usability tends to be religion more than science. :)
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.
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.
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);
}
}
}
}
You can find fixed and slightly improved version here.
I haven't been able to successfully change the formItem so that the labels are placed above the input controls. Any ideas?
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
These comments have been invaluable to me as is this whole site. I thank you for your comment.
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.
Post a Comment