When I right-click in the right portion of my page, my context menu gets cut off. The issue is illustrated here: https://i.sstatic.net/FZguG.jpg
I have tried looking for solutions on other StackOverflow pages and trying different demos, but all suggestions address the same problem as mentioned above. Leaving comments on related posts did not yield any helpful responses either.
Update
Code:
In an attempt to resolve this issue, I am using the following code snippet:
var menu = document.querySelector('.menu');
function showMenu(x, y) {
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('menu-show');
}
function hideMenu() {
menu.classList.remove('menu-show');
}
function onContextMenu(e) {
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown(e) {
hideMenu();
document.removeEventListener('mousedown', onMouseDown);
}
document.addEventListener('contextmenu', onContextMenu, false);A snippet of CSS related to the menu:
/* Page */
html {
width: 100%;
height: 100%;
background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}
...
<ul class="menu">
...
</ul>
<div class="container">
<h1>Context Menu</h1>
<h2>(right-click anywhere)</h2>
</div>