jQuery-contextMenu
jQuery-contextMenu copied to clipboard
swisnl
Issue with menu that is taller than the viewport with submenu items
When updating to the latest version, it seems there has been some functionality added to scroll the menu if it becomes too tall. This is great, but it doesn't seem to work in tandem with submenus. I'm not longer able to access the submenus once this special scrolling kicks in.
Here's an example:
<html>
<head>
<title>Submenu example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.ui.position.js"></script>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
<script>
$(function(){
/**************************************************
* Context-Menu with Sub-Menu
**************************************************/
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {"name": "Edit", "icon": "edit"},
"edit": {"name": "Edit", "icon": "edit"},
"cut": {"name": "Cut", "icon": "cut"},
"sep1": "---------",
"quit": {"name": "Quit", "icon": "quit"},
"sep2": "---------",
"fold1": {
"name": "Sub group",
"items": {
"fold1-key1": {"name": "Foo bar"},
"fold2": {
"name": "Sub group 2",
"items": {
"fold2-key1": {"name": "alpha"},
"fold2-key2": {"name": "bravo"},
"fold2-key3": {"name": "charlie"}
}
},
"fold1-key3": {"name": "delta"}
}
},
"fold1a": {
"name": "Other group",
"items": {
"fold1a-key1": {"name": "echo"},
"fold1a-key2": {"name": "foxtrot"},
"fold1a-key3": {"name": "golf"}
}
},
"edit1": {"name": "Edit", "icon": "edit"},
"edit2": {"name": "Edit", "icon": "edit"},
"edit3": {"name": "Edit", "icon": "edit"},
"edit4": {"name": "Edit", "icon": "edit"},
"edit5": {"name": "Edit", "icon": "edit"},
"edit6": {"name": "Edit", "icon": "edit"},
"edit7": {"name": "Edit", "icon": "edit"},
"edit8": {"name": "Edit", "icon": "edit"},
"edit9": {"name": "Edit", "icon": "edit"},
"edit10": {"name": "Edit", "icon": "edit"},
"edit11": {"name": "Edit", "icon": "edit"},
"edit12": {"name": "Edit", "icon": "edit"},
"edit13": {"name": "Edit", "icon": "edit"},
"edit14": {"name": "Edit", "icon": "edit"},
"edit15": {"name": "Edit", "icon": "edit"},
"edit16": {"name": "Edit", "icon": "edit"},
"edit17": {"name": "Edit", "icon": "edit"},
"edit18": {"name": "Edit", "icon": "edit"},
"edit19": {"name": "Edit", "icon": "edit"},
"edit20": {"name": "Edit", "icon": "edit"},
"edit21": {"name": "Edit", "icon": "edit"},
"edit22": {"name": "Edit", "icon": "edit"},
"edit23": {"name": "Edit", "icon": "edit"},
"edit24": {"name": "Edit", "icon": "edit"},
}
});
});
</script>
</body>
</html>
When I click on the submenu items at the top, they do not open as one would expect:
I feel like this is likely just a permutation that wasn't tested, but it would be nice to have. This becomes more apparent on a mobile phone.
