Do you have a good idea how to make the values align with the colons in a SimpleForm like this when the label is so long that it breaks (while not messing up the styling in the other cases)?
I want the value to align with the colon on the bottom here - marked in yellow:
But I'm happy with the way it looks all other cases - without a linebreak:
and on the phone:
Here's the example code:
https://embed.plnkr.co/qwU16eZj6VeIEYnH/preview
How to align value vertically on bottom in SimpleForm when label has linebreaks
Viewed 40
1 Answers
According to the SAP Fiori design guideline Form / Simple Form:
To avoid truncation, labels within forms wrap automatically.
Always aim to keep your labels as concise as possible. Remember that a label is not a help text. It must be meaningful, succinct, short, and descriptive. The purpose of the wrapping feature is to make the full label text legible and to help avoid unnecessary use of abbreviations. It is not intended as a fallback for very long labels.
Other than keeping the labels as concise as possible but avoiding abbreviations, there is currently no reliable solution that vertically aligns the form element in case the label gets wrapped. You can ask Form control developers for clarification whether the current behavior is the intended design and, if not, to fix it.
Related