Skip to Content (Press Enter)
2020-05-05 11-11-47
Gary Williams
3Views
3Comments
Top aligned labels
Question
Hi Guys,
I was just looking at a link via your London theme demo that talks about good form layouts - specifically labels
https://www.thatwebguyblog.com/post/15-steps-towards-better-form-usability/
It points out that top aligned labels are the right way to go... how can I achive this...? Can this be set as the default label position rather than left align as it is now?... seems to make sense to always be top aligned.
Thanks
Gary
0
0
11 Sep 2014
Copy Link
2014-02-07 17-02-43
Vasco Pessanha
Hi Gary,
In the Form widget, you can just change the "Label Position" property to "Above Inputs" and labels will be automatically on top. Is this enough?

Best Regards,
Vasco Pessanha
0
0
11 Sep 2014
Copy Link
2020-05-05 11-11-47
Gary Williams
Hi Vasco,
Personally I'd prefer the default to be above, but now you've pointed out how to change them I'm happy!
(Just for clarity the dropdown for label position lists 'Top' rather than "Above Inputs" on my version.)
Thanks
Gary
0
0
11 Sep 2014
Copy Link
2014-02-07 17-02-43
Vasco Pessanha
Hi Gary,
Despite the top-aligned advantages refered in that usability blog post, there are some disadvantages also. For example, if you have a very long form, you'll end up by wasting a lot of screen real estate. If you take a look into the london "Long Form" sample, you can imagine how long this page would be with labels on top:
https://labs.outsystems.net/londontheme/LongForm.aspx

If you really want all the forms with labels on top, you can still override the css to always display labels on top.
Regarding the property name and value, it will change in the next version ;)

Best Regards,
Vasco Pessanha
0
0
11 Sep 2014
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.