vaadin-radio-button is not center aligned

[TatuLund]

vaadin-radio-button is currently baseline aligned

In many scenarios this is visible so that the circle is few pixels higher, center alignment could be visually more balanced (opionated)

Workaround

frontend/styles/radio-button-style.css

.vaadin-radio-button-container {
 align-items: center !important;
}

 Import in Java  @CssImport(value = "./styles/radio-button-style.css", themeFor="vaadin-radio-button")

[jouni]

Center alignment won't work with labels that wrap on multiple lines. That’s the main reason to use baseline at the moment.

Side note: the workaround CSS is using unsupported API/selector, and not guaranteed to work in future releases.

[leluna]

I would argue that multiple lines is rather rare with horizontally ordered radio buttons, which is the default. Thus, the default styling should primarily work nicely in this case. Maybe change the align-items to baseline for the vertical theme?

In grids where you have a visible horizontal guide (stripes or lines), it is quite prominent imo, and looks quite messy.

[yuriy-fix]

We will investigate if there is a way to align it in the grid without changing the baseline, but most probably it won't be changed (based on Jouni's comment).

[rolfsmeds]

Yeah I don't see us messing with the baseline alignment, but I think there's potential to fix this without doing that:

The two baseline-aligned elements are the label (green below) and the vaadin-radio-button-wrapper div (white below):

Both seem quite correctly aligned in themselves, but the radio shadow part div part="radio" that contains the button itself, is clearly not vertically centered inside the wrapper div.

Perhaps it's possible to adjust the vertical positioning of the radio part without touching the vertical alignment of its parent? WDYT @jouni ?

[jouni]

The baseline alignment of the radio button and the label has gotten broken at some point (I assume when the container was changed from a flex container to a grid container).

Here’s an example where I set --lumo-font-size-m: 24px;

Vaadin 23:

Vaadin 14:

The sizing of the radio button is intentionally now based on the --lumo-size-* properties (vs em in v14). But it should ideally still get nicely aligned vertically with the first line of label text.

[jouni]

I’ll try if there’s a way to make all these requirements happen at the same time.

[web-padawan]

@jouni We could probably revert grid container change as in introduced another problem: #3570

[jouni]

Some more observations:

• Seems odd that the whole host does not register the click, when the [active] state is applied no matter where you click. This makes it tricky to adjust styles, as both the <label> element and the .vaadin-radio-button-wrapper element need to be exactly the same height, and there can't be any additional space outside them (like padding on the host).
• I can make the alignment work with some tweaks, but that requires using the internal .vaadin-radio-button-wrapper element/selector. Basically, it should have the same vertical padding as the <label> element so that their internal baselines are on the same place.

[yuriy-fix]

@jouni, was it fixed with https://github.com/vaadin/web-components/pull/5288?