Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with menu that is taller than the viewport with submenu items #756

Open
codesterother opened this issue Sep 29, 2021 · 1 comment
Open

Issue with menu that is taller than the viewport with submenu items #756

codesterother opened this issue Sep 29, 2021 · 1 comment

Comments

@codesterother
Copy link

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:
image

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.
@sudeepa88
Copy link

So edit feature will be under others ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@codesterother @sudeepa88