Vaadin 23, component sizing optimization problem (Textfield, Select, etc.)

Malcador 0
Viewed 56

I am trying to make my web app look identical on all screens. Essentially, I want my website to have the same appearance regardless of the resolution on user side.

I am already using vw and vh to set size, but some components (at least TextField, Select) have inner html code that seems to be completely unaffected by what I can do in Java, as well as parent css properties. For example:

""

Buttons looking not too bad, but TextField... I did set font size to be 1vw through css properties, but that only effects placeholder. I don't know, is there a way to bind all inner components of, for example TextField, to vw, vh of my choosing?

vaadin java
1 Answers

If you want all font sizes to adapt to the viewport width, you should override all Lumo font-size tokens/properties: https://vaadin.com/docs/latest/styling/lumo/design-tokens/typography/#lumo-font-size

For example:

frontend/themes/mytheme/styles.css:

html {
  --lumo-font-size-xxxl: 2.5vw;
  --lumo-font-size-xxl: 1.75vw;
  --lumo-font-size-xl: 1.375vw;
  --lumo-font-size-l: 1.125vw;
  --lumo-font-size-m: 1vw;
  --lumo-font-size-s: 0.875vw;
  --lumo-font-size-xs: 0.8125vw;
  --lumo-font-size-xxs: 0.75vw;
}
Jouni0
Related