[Form]: Vertical Spacing Issues
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.8k
- Forks
- 285
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 59
Description
Bug Description
The vertical spacing in vertical forms is not according to the spec and the UI5 implementation.
-
There should be 0.125rem (2px) between label and input field (in addition to the margin of the input field), but currently there is none.
-
There should be 0.625rem (10px) between two label/input items (in addition to the margin of the input field). Currently, there is 10px from the label padding and 2px from the ui5-form-layout, resulting in 12px.
Interestingly, the 2px are not added when wrapping with a ui5-form-group.
Affected Component
No response
Expected Behaviour
No response
Isolated Example
No response
Steps to Reproduce
https://jsfiddle.net/12myzgra/
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
Latest
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration
- I’m not disclosing any internal or sensitive information.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked JSFiddle reproduction and inspect the vertical form layout behavior it demonstrates. Compare label-to-input and item-to-item spacing, including the ui5-form-group case, with the stated 2px and 10px requirements. Done means both spacing rules match the specification in each case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100