Scrollbar for long context menu about jquery-contextmenu

[yiwang]

this CSS solution on SO works well for me:
http://stackoverflow.com/questions/7968617/jquery-contextmenu-doesnot-appear-fully-if-element-is-at-the-bottom-of-the-page

[rodneyrehm]

The contextMenu - as it is - is not designed for "really long lists of options". can you, by any chance, group your options into submenus, to make them more accessible?

[Crnell]

No there isn't any way to put them into submenus as it is a list of countries.
Yeah I suppose it's not built for massive amount of items, I will use another type of control.

Thanks!

[asharpe]

I'd like to see this feature as well. I'm reimplementing something and long menus are part of it. I've tried wrapping the submenu in a div and setting its overflow to auto but still no dice. I'd be happy enough even for pointers to how it might be done.

[rodneyrehm]

In its current state menus are not scrollable. To make them scrollable, the <ul> has to be wrapped in a <div style="overflow-y:auto">. This is the case because the contents of <ul> cannot be made scrollable (or I'm too dumb to make it happen).

This would change the DOM in a way that requires touching most of the internal selectors, exposing the $wrapper and stuff. Nothing that's done in a couple of minutes.

But aside from all that, I'm not convinced a context menu should have a scrollable command list. I've never seen that in other systems either.

[bastianallgeier]

I really wouldn't implement that. Context menus shouldn't be scrollable at all. If you are required to do that, you really should look for a different way to solve the problem. In my opinion scrollable context menus will never feel right and will always lead to a bad user experience.

[untitaker]

Android 4.x has scrollable context menus.

[bastianallgeier]

@untitaker is that a pro or con comment? :P

[bastianallgeier]

no, seriously :) I've seen scrollable context menus in Mac apps as well and it always ended up in professional mouse acrobatics. It might feel different on a touch device, though I doubt that.

[untitaker]

I was not claiming that context menus should be used for long lists. I was saying they should be scrollable if needed.

Android core developers have to design the UI elements they make available as "tolerant" as possible, simply because a large part of Android app developers (compared to iOS developers) are not good UI designers.

I think UI elements should be still usable for the end user, even if the app designer screws it up. And therefore, context menus should be scrollable.

[asharpe]

I've tried wrapping the UL in a div and I must be too dumb to get that to work (in chrome 22.stuff on OSX), and I'm just trying to get a single instance of the menu to scroll - I'll deal with the change to selectors after I've got something that can behave in the correct fashion.

[bastianallgeier]

I totally agree when it comes to UI elements for an OS, but this is a jQuery plugin, which IMHO should focus on keeping it small, simple and stable instead of providing fallbacks for developers who screw it up. Adding additional lines of code and DOM elements to provide a feature which shouldn't be available at all, is a no-go for me and would be a reason not to use it. This is one of the main reasons why we see so many bloated code in jQuery plugins – because developers try to include every feature and every fallback you could think of.

[asharpe]

@bastianallgeier: I have no problem with your point about plugin bloat, and in fact I agree. A search brought me to this issue and I'm not asking you to include this in YOUR codebase. I'm after a scrollable context menu and am happy to implement it. I outlined what I tried (turns out to be what Rodney suggested) and would happily take more suggestions, including a pointer to a forum that might be more appropriate.

[wilfi00]

Hello everyone,

10 years later I'm still facing this issue, maybe i can save someone some hours 😅

@yiwang your solution didn't work for me because I use submenu and subemnu doesn't work when this style is applied :/

I personnally use this css :

.context-menu-list:has(.context-menu-submenu):has(.context-menu-visible) .context-menu-list:not(:has(.context-menu-list))  {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

It works well but it's not perfect, there is two downsides :

• it uses :has which is currently not supported by firefox but hopefully it's a matter of time (cf Honza's reply : https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794) and there is a workaround (https://stackoverflow.com/questions/73936048/how-do-you-enable-has-selector-on-firefox)
• it only makes the very last submenu scrollable which means if you have 3 submenu, the third submenu will be scrollable but not the second 😞

Hope it helps, have a great day !