[Form]: Alignment Issues for FormItems with Varying Heights
i832513 opened this issue · 2 comments
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
- 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.
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.
🎉 This issue has been resolved in version v1.28.2 🎉
The release is available on v1.28.2
Your semantic-release bot 📦🚀