Mobile context menu styling

On touch devices the user can access a context menu. It fits all of our current needs but we do need to style it. Current default menu does not have any classes or anything that would allow easy styling. There doesn’t seem to be any way to add them either, other than creating a new context menu from scratch.

Can this be done without setting up a new one?

Are you asking if you can modify ContextMenuTool | GoJS API ? Yes, I think you can, but the initial value may change in unexpected ways in the future. Including that it might not exist until a touch event causes it to be created on demand.

See HTML Context Menu and LightBox Style HTML Custom Context Menu.

Yes, that’s the one. What I’m asking, however, is can I add some css class to the default html wrapper so I can apply some styling to it? Then, whether or not it exists at any given time doesn’t matter.

It isn’t documented (so it might change in the future) and might not be usable by you in your circumstances, but the HTML created by ContextMenuTool.showDefaultContextMenu uses the classes “goCXul” for the <ul> element and “goCXli” for the <li> element and “goCXa” for the <a> element. Those CSS classes are defined when the default context menu is first created.

I see. Unfortunately that doesn’t help as I’d need to select the outermost elements. Please consider adding an option to give classes to them to the backlog, I imagine it’ll be a very minor change.

Are you talking about the <div> element holding the list? I suppose we could add a CSS class for that. But you could do that for now…

In new versions, the two DIV elements that make up the CSS context menu will have class names you can use. That will be out within a week, probably.

In the meantime, you can copy the re-implementation in this sample and modify it however you like, including just adding class names.