Making menus wider?

Flow
1

I have a menu that by default looks like this:
image

To avoid too many wrapping menu entries, I’ve tried to make it wider with:

vaadin-context-menu-list-box {
  width: 35ch;
}

But, then, if there is not enough height, or I open it too far down in the screen, I get:

image

I now have a horizontal scrollbar as well, and the submenu markers are hidden by the vertical scrollbar.

In the browser, I have tried to set width on <vaadin-context-menu> instead but that had no effect

2

This is a quite dummy element. You would need to define the width of the overlay element instead.

3

Didn’t work to set the width of <vaadin-context-menu-overlay> either.
Looks like its default width covers the whole window. That makes sense, since it contains the menu and the submenus?

4

Check the styling hints here

You should use either part overlay or content depending on the scenario what you are doing.

5

Thanks :smiley:

Replacing

vaadin-context-menu-list-box {
    width: 35ch;
}

with

vaadin-context-menu-overlay::part(overlay) {
    width: 35ch;
}

solved the issue:

image