[Form]: Alignment Issues for FormItems with Varying Heights

[i832513]

Describe the bug

When there are FormItems which have varying heights, this will trigger alignment issues inside the form.

Fields in different columns are not aligned unless the heights of each field happen to be the same. At the very least the inputs should be top aligned; however, that would still not exactly match the expectation.

NOTE:
SF will always be using "labelSpanS" through XL as 12, so we always want the label above the field. The center alignment thing seems to make sense only when the label is also center aligned. Just calling this out because I imagine that getting the FieldGroups to behave might be a lot of work - so one possibility is to detect labelSpan is 12 and to not center align in that case but do top align.

I don't think Management will like that though - I think the Classic UI5 behavior is technically correct.

Isolated Example

https://stackblitz.com/edit/github-wajz6w?file=src%2FApp.tsx

Reproduction steps

1. Go to stackblitz link and check the alignment.

Expected Behaviour

Fields in different columns should not necessarily align unless they have the same heights. Another option might be that because there is labelSpan of 12 it should always top align within the field row in the grid - but that is a less desirable outcome. For sure center alignment looks very odd in this case.

Screenshots or Videos

ACTUAL:

The centers of the text area and fields across items in the same row are aligned.

EXPECTATION:
Comparing to UI5 classic framework:

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

Any

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi Scott,
#5843 should provide a very basic fix for the issue which will align all items in a Form to the top in case the label span is set to 12.
I totally agree that the SAPUI5 implementation looks way better, but this is something we can't achieve with our Form without having to reimplement it from scratch again - sorry that we can't provide a better fix for now.

[ui5-webcomponents-react-bot]

🎉 This issue has been resolved in version v1.28.2 🎉

The release is available on v1.28.2

Your semantic-release bot 📦🚀