How to set checkbox size in flow v24.4+?

Flow
1

Hello,

i’m struggeling to make the check boxes in vaadin flow smaller than the rest of the UI.
I added two checkboxes to the filter header of the grid component, and the filters works as expected. (Show only lines with/without text)

But the two checkboxes in front of the text field are to height, they should be ~50% of the regular font size, or the text field beside it.

Setting width+height in vaadin-checbox { width: 8px; height: 8px } seems to not work in that context

Any ideas?

grafik

André

1 Like
2

How about --vaadin-checkbox-size: 4px; (even tho it’s missing in the docs - it works)

3

Thanks.
In flow this works fine
myCheckbox.getElement().getStyle().set("--vaadin-checkbox-size", "0.7rem");

4

Do you want to set the size for all Checkboxes?
You should add it to the theme css file

5

Nope, only in these very specific instances in the filter headers of the grid.

6

I would suggest to move it to the CSS file with a class then. And add the class name to the checkbox. I don’t like inline styles

1 Like