[ui5-form-item]: After upgrade to 2.19.2 the label and the content are no longer vertically aligned

[mofterdinger]

Bug Description

Hi, after upgrading the UI5 Web Components from 2.18.1 to 2.19.2 in our web application we are facing a graphical rendering issue with the ui5-form-item control. The label and the content are no longer aligned vertically.

Here a screenshot of the problem:

The issue can be also seen in the sample for the ui5-form:

Affected Component

ui5-form-item

Expected Behaviour

The label and the content are vertically aligned on the same line.

Isolated Example

https://ui5.github.io/webcomponents/play/#eNq1VfFv6jYQ_lfuRdMTVA0BClNLA9rK-rZKdKsG094mfngmNuA3x85iB8gq_vednQTS9rVDk55atfH5vrvvzr7Pjx6XlO1aaxMLb_DoSRIzb1A3nnuRkoZJg-bwne9DIki-SlUmqb9UgoLvj-YyfPfDL-PZHw-3YEHWYP-DIHI1nHtMzj202Z9wzQjFb8DfUJtcMLs4G0hlGgPKllwy2oRHtFGubaoBSCXZNRr2Fu_iu_2lSiNG_UgJlfqEfs60eeILYVDFt4uYGQLRmqSaGaT02-yDf-lYlVu2crRvONsmKjVzD8q60bjl1KyHlG14xHy3OAcuueFE-Doigg07rXYZzHCDOackTgQLg2KFZQdl3fi5UDQHRw1DL0j0V9lNV8kANiRt-L4myc1ha2x3mmWCL5yBz2R5DhBmvO8LsmAC9FptXVA5-qDSGCYkV5kJg4PHyDkbtjOjaQfuL2DSg4-TXuHhzGGwSF-P-kBWDKb8H_bFmMAp1md2psiL7Ce1yFVQLThlaeFbfGPnN0RktjmXfUQVoGKvPEvKNwXCHhHBK2NBVUdjsivOaACdfrud7K6hWnb7bqk2LF0KLGM3AJIZVTbWplnaRtmjYqnjifG-pzRlWmMG4QpBk-1WFyZd7Fb3GdjnhsXPWyaURbnFuLhUiPoZL9yg3rkK5JoXCaK17R8u0PlXRuFBcWlgahTSedbJ4EX6_8fpz7sHGCvKgjE3-cnkeh3sBx6DUVv5lYhNTcqYOZmRZYOdgs63ncuvxGiM02fS05v0I0tjIvP_ZHM0FSu86wXJV2a_mnsdpTwxYPLEDYGimWB2KtLIzQSXrc_aTVPh6DTJKlGhSUEl22-qi7c_r0LVHovKUn8pgrN6lDXOLpwFc8ljq60w91pBbVtniTU7gijeL7GOwRP8d9ikYMsWkUKLxJwaG6VNYIWuinOS8x22vQLYnyCA2Zrh4yJQILhc4SuA3LmGlP2d8RTHUEmR28cHDPppp_Mn5JrYC3Iysxnej5Odp04aj0XgKWgDpbAOgaooi9G7tWLmVjD7eZPf0cZRb5vXFeig1m_iapp-hB6k-E1oTbCbjmzBoUUovd2g2wQLYriNrnYMuExslnNoNGE4ss_-3BTpnKRjqkYZwD0ZEECn3YYzJ_wuvjkkbLn3oVXhPn3z6D73ye6TczwU1eIS3X-a3U_QDQsorDf579a94UA29L5Za_ZzN0us8DzQ5svSBCPoX13B-_dlDeEQSXcvmoXbHIXOZCkOvHdfnKfZAxMa7-AxgEP0noboXVy9DDGZe69G6PXaLwEfK4T9c7BOHZP9tVWA_b-YloKo

Steps to Reproduce

1. Open your sample
2. Check that the label and content of the ui5-form-item is not vertically aligned.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.19.2

Browser

Firefox + Safari

Operating System

MacOS 26.3

Additional Context

No response

Organization

SAP SE

Declaration

• I’m not disclosing any internal or sensitive information.

[ilhan007]

Hello @mofterdinger until we fix the problem , you can use this CSS to fix it on your side

ui5-form-item::part(layout) {
 align-items: baseline;
}

[mofterdinger]

Hi, thanks for providing a workaround. With this workaround it looks like this:

The workaround works for the first and third ui5-form-item, but not for the others. Is there something else I can try ?

Also the vertical space between the four ui5-form-items seems to be larger then in version 2.18.1:

Will this be also fixed ?

[ilhan007]

The real fix I am exploring is renaming this CSS var --ui5-form-item-label-padding on ui5-form

to --ui5-form-item-label-padding-internal

can you try this?

[mofterdinger]

With the suggested change (--ui5-form-item-label-padding-internal)

it looks very good:

For me this fix would work :-)

[mofterdinger]

I forgot to mention, that I also removed the css you mentioned earlier:

ui5-form-item::part(layout) {
  align-items: center;
}

and it still looks good. So just changing to --ui5-form-item-label-padding-internal fixed it in our application.

[ilhan007]

Yes, PR is already created - it's just the CSS variable change.
The fix will be released on 4-5 March v2.20.
Earlier, next Thursday 26 Feb we we will release v2.20-rc.2 that will also include it.

[mofterdinger]

Thanks for the quick fix, I'm already testing with v2.20.0-rc1. I will give the v2.20.0-rc2 next week a try.