[Inputs]: Input, Button, CheckBox, RadioButton components are not aligned correctly when used inline

[Lukas742]

Bug Description

When input components are placed in any horizontal container, the visible (focus) borders of the components do not line up at the top edges. This creates a visually inconsistent row, as shown in the screenshot below:

For SAPUI5 controls, this doesn't seem to be the case:

Show Code

	<HBox renderType="Bare">
		<Switch />
		<CheckBox text="Check" />
		<Button text="Button" />
		<Input />
	</HBox>

My findings are based on the "Cozy" content-density mode:

• Input-like components should have a height of 2.75rem
• Button components: Margin missing -> the margin can be added on consumer side
• inputs with input field: The margin should be 0.25rem 0 but is 0.1875rem 0;
• CheckBox, RadioButton, Switch: Focus border doesn't line up with other input components.

If it's easier for you I can also open dedicated issues for component groups, so the responsible teams can easier track this. In this case, please let me know which components I can group together.

Affected Component

input components

Expected Behaviour

All standard input components should line up at the top edge.

Isolated Example

https://stackblitz.com/edit/github-7kedhshx?file=package.json,main.js,index.html

Steps to Reproduce

1. Got to StackBlitz
2. See misalignment

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.15.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

SIX Technologies

Declaration

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

[dimovpetar]

Hello @UI5/ui5-team-ctr-ril ,

Only consider

Input-like components should have a height of 2.75rem

and

inputs with input field: The margin should be 0.25rem 0 but is 0.1875rem 0;

@Lukas742 , please open separate issue for the button margins, and separate for the focus outlines.

Best regards, Petar

[pskelin]

@Lukas742 we have previously discussed alignment and the recommendation was always to use flex (you already have it) and add align-items: center. Even the native HTML elements are not aligned and need some application logic to be properly aligned.

For buttons missing a margin, the idea was that their default should be like html buttons - you can put them next to each other like desks in the real world, and if you need spacing you can add it with styles.

Would this work for you? It should be documented in any case, I found nothing in the docs, only the old issues: #1024 #1025

[Lukas742]

Hi @pskelin and @dimovpetar, Thanks for the info! I’ll discuss this internally with the team and get back to you.

@dimovpetar, I’ll hold off on creating other issues until we confirm whether center-aligning the items is sufficient.

[Lukas742]

Hi @pskelin & @dimovpetar

Center-aligning the items works for us, thanks!
By the way, it seems this approach doesn’t just work for flex items, but for other display modes as well. However, for some modes that default to baseline alignment for inline items, additional CSS is required: https://stackblitz.com/edit/github-eetuyxby-u6h2tfgg?file=src%2FApp.tsx.

That said, the following issue still feels like a bug to me:

inputs with input field: The margin should be 0.25rem 0 but is 0.1875rem 0;

The block margin should be 0.25rem in Cozy mode and only 0.1875rem in Compact mode. That's why I'm keeping this issue open. If you’d prefer that I create a separate issue reporting just this, please let me know.

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!

[ui5-webcomponents-bot]

:tada: This issue has been resolved in version v2.17.0 :tada:

The release is available on v2.17.0

Your semantic-release bot :package::rocket: