简体   繁体   中英

How to align value vertically on bottom in SimpleForm when label has linebreaks

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

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM