sap.m.Text misalignment in sap.m.Table

[whydrae]

OpenUI5 version: 1.109.0

Browser/version (+device/version): Chrome 108.0.5359.124

Any other tested browsers/devices(OK/FAIL): Edge - FAIL.

URL (minimal example if possible): https://jsbin.com/nedubuyaxi/edit?html,output

User/password (if required and possible - do not post any confidential information here): -

Steps to reproduce the problem:

1. Open the jsbin link

What is the expected result? -- Label and Text are aligned inside the HBox of the ColumnListItem of the Table control.

What happens instead? -- sap.m.Text is misaligned

Any other information? (attach screenshot if possible)

This issue was introduced after the following commit: https://github.com/SAP/openui5/commit/0f9144a6dbf4873dc2f1d477af0819cce1d44e9e. If line-height: inherit; is removed, the text is aligned properly.

Is not reproducible in 1.108, only appears in 1.109.

[boghyon]

Would any of the following workarounds be acceptable as an actual solution?

• Removing the outer HBox instead of nested HBoxes: https://jsbin.com/yecatay/edit?html,output
• Keeping the outer HBox but using sap.m.ObjectAttribute/.ObjectStatus instead of an inner HBox and a combination of sap.m.Label and sap.m.Text: https://jsbin.com/nodepih/edit?html,output

[whydrae]

@boghyon, thanks, that indeed works! Actually, the real table is more complex and this bug/feature results in many misalignments across the different cells. Not sure if it will be fixed, but I decided to temporary patch a css with line-height: 1.5rem !important; for .sapMListTbl .sapMFlexItem .sapMText (I know, it's not a recommended way).

[i556484]

@whydrae Thanks for sharing your finding. I've created an internal incident 2280202387. The status of the issue will be updated here in GitHub.