Skip to content

[Form]: Incorrect labelSpan behavior when width is close to layout breakpoint #13723

Description

@VictorHumanist

Bug Description

There are situations when ui5-form ends up having a fractional width in px (like 1439.2px). If this width is exactly between the layout breakpoints (599.2px, 1023.2px or 1439.2px), the labelSpan property of ui5-form stops working.

Affected Component

Form

Expected Behaviour

The labelSpan property works as expected

Isolated Example

https://ui5.github.io/webcomponents/play/#eNrtV21v2jAQ_ivXfGqrmlBKpzVL0bRukyZ1W7UybZP4YuJr486xs9iUoor_vrNJEHRbFfaxRRDg7p578RMf8d1HUgu86-SuUFFyH2leYJSsKg-izGiH2pE63WEMSsVn15WZaMGujBLA2GCk0523n8-GPy7egXfyCv8Niuvr01GEehSRbv2V5sgFaYHeqXUzhV7YT7Rxu4nAK6lR7ME96YS0PmkC2mh8RYq59w-Zgv3KVBkKlhllKsbFzcS6NSykcRN_m26brn26tEDHIct5ZdHRPv46fM9ehq1cm3y7kP5W4rQ0lRtFUDcLKadSuPxU4K3MkAXhAKSWTnLFbMYVnh52unUwJx3lvORFqTCNFxJ1SFy3CP0cGzGDUBqFHvPsZ92CYSUJ3PJqlzHLyzdL05m37NUJ_tK4DHXdvERrOpHHTPExKrC5mYawevDNV53GS9sAAs7hnRscn5yUdwtbkOsYRHCxrDOsOoEAJW5CDGZLrsl2ediDj3Sd0_WdPupCmxhMOiyWmroyZTyxQThb8Exen-geJKtFNk6-LMgUt5acvEDgLyjgwkjt4NKZCu3aAmAhradfqpq_qnH1sKzWhHV6DyiDxzjz6GfP2otutzVnAfskGEvzqiFuY8YOu72jtp25wD77TeZp2KA3G_iWt26vvwlr_afWnv9BWf-o9XNzgd3uMqJhk-6s4Vve-v3uBqz1n8jD8x_H3fqom9qskqUDNyv96gsjJgpp2bbKvMil7txYqoHmgAAMx3B_-F4cw-NmvH30QB3ND5pQK0N1o1mdqOP91Si5FAj78UjLwo8TMIo68YrZTkqvDgXSvPKnb6hgzf81ERNPcZwZ0mjKaWMakVz8nrhq4rQCfyCqGwdKHcMwR5qmlDJTqa9p7KHKpYUKf01kRffPaDXz0xY4wtkw2LTIdO73Ruu6hrQjGnA0n_8GpS2woA

Steps to Reproduce

Each form here has label-span="S12 M12 L12 XL12" which should guarantee the vertical layout of field label and value/input. Notice how it reverts to horizontal layout in the examples with fractional width.

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.23.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

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

Metadata

Metadata

Assignees

Labels

TOPIC CorebugThis issue is a bug in the code

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions