Just upgraded from Vaadin 21 to 23. The toggle button looked great under 21

Directory ToggleButton for Flow
1

Just upgraded from Vaadin 21 to 23. The toggle button looked great under 21, but now looks awful. Any chance it will be updated?

2

I noticed the same. It looks like the width/height are incorrect due to theme changes in v23. The below styles are a quick workaround…

These styles…

:host(.toggle-button) [part='checkbox']
::after {
    width: calc(1.15em - 4px);
    height: calc(1.15em - 4px);
}

Need to be added to a css file and applied to the vaadin checkbox. e.g. on your main layout class…

@CssImport(value = "styles/components/vaadin-checkbox.css", themeFor = "vaadin-checkbox")

The prior styles used 1.5em for the toggle handle, which no longer fits. Reducing to 1.15em seems to fit now. Though the toggle is a bit larger overall than it used to be.

3

Thanks Dan - That fixed it.