Rendering problems with chrome and german umlauts

Hilla
1

Hi,

when our customers use Google Chrome a zoom level of 110% or below the uppercase german umlauts ÄÖÜ are not displayed in the label of Vaadin components.

I tested around a bit and found out that the css rule [part='label'] with line-height: 1 is responsibe for that. Is there a way to increase line-height slightly (even 1.05 will do) for all Vaadin components with a label at the same time or do i have to theme every single component individually?

2

Ping @resilient-meerkat as CSS crack :nerd_face:

3

Using global CSS and the ::part selector, you can at least use a selector list to combine multiple elements into a single rule:

vaadin-text-field::part(label),
vaadin-text-area::part(label),
vaadin-text-select::part(label) {
    line-height: 1.05;
}
4

this works with shadowdom?

5

Yes because the label and other important parts are defined as part within the shadow dom

6

ahhhh, i see

7

With the upcoming v24 / h2 you can probably style most of the components like so - with an enhanced documentation for all the parts currently in work

8

i will give it a try, thank you guys :slightly_smiling_face:

9

@objective-rat Apart from that it would be great if you can open an issue here: https://github.com/vaadin/web-components/issues
It doesn’t look like the problem is tracked yet.

10

@cheerful-baboon I will do so

11

works like a charm