Items to toggle column visibility does not respond on full width

[a-schild]

When using the option to toggle column visibilty, the mouse hover effect changes the background color of the whole "line" where the name is shown. But when the user clicks beside the checkbox or label of the text, then nothing happens.

As the whole row/menu entry is showing hover effects when moving the mouse, it should also be the click area where the checkbox responds to.

In the sample below you see that the "Name" column is showing the light blue hover effect, but in fact only clicking inside the red area toggels the column visibility. Thats not what the users expect...

It's even worse for the users, when the column names have very different lengths, so for example you have to actually click either on the checkbox or the "Brand" text to toggle the brand column visibility. Clicking where the mouse cursor is shown only closes the dropdown menu, but does not toggle the column visibility

[javier-godoy]

Thanks for reporting this bug. I was able to confirm it not only in the demo but also in cookbook.

The following styles seem to help (I'll do a new release with the fix, but meanwhile you can add them as a workaround)

For vaadin-context-menu-list-box

:host([theme~='gridHelperToggle']) [part~="items"] ::slotted(.vaadin-menu-item) {
 padding: 0;
}

For vaadin-context-menu-item

:host([theme~='gridHelperToggle'])::part(checkmark) {
 display: none;
}

:host([theme~='gridHelperToggle']) ::slotted(vaadin-checkbox) {
 width: 100%;
}

[a-schild]

Hmmm.. where do I place them? If I place them in my normal application css file, they don't get picket up. Or do I have to replace the theme with Lumo or somehting?

[javier-godoy]

You can add them in separate CSS files with @CssImport(themeFor="vaadin-context-menu-list-box") and @CssImport(themeFor="vaadin-context-menu-item"). If you have a custom theme, you can also add them under the components folder (named vaadin-context-menu-list-box.css and vaadin-context-menu-item.css).

[javier-godoy]

Changes have been released in version 0.2.1

[a-schild]

Thanks, works fine