My goal is to implement a contextual menu for my HTML web application. Strangely, when the menu is hidden, there is no space at the top of the page, but once it's activated, some empty space appears.
Contextual menu in disabled state: https://i.sstatic.net/MEUmr.png
Contextual menu in enabled state: https://i.sstatic.net/UUNPd.png
Below is the code snippet:
<style>
#contexmenu{
display: none;
position: relative;
width: 100px;
background: rgb(238, 238, 238);}
#contexmenu section{
padding: 5px;}
#contexmenu section:hover{
background-color: rgb(219, 219, 219)}
#mainarea{
width: 100vw;
height: calc(100vh - 50px);
background: red;
}
</style>
<article id="contexmenu">
<section onclick="addJob()">Add Job</section>
<section>Edit Job</section>
<section>Refresh</section>
</article>
<article id="mainarea">
</article>
<script>
function addJob(){
alert("");
}
document.addEventListener("contextmenu", function(event){
event.preventDefault();
var contexmenu = document.getElementById("contexmenu")
contexmenu.style.display = "block";
contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
contexmenu.style.left = `${event.screenX - 65}px`;
console.log("New event");
})
document.addEventListener("click", function(event){
document.getElementById("contexmenu").style.display = "none";
})
</script>
I am trying to identify what is causing this issue and figure out the necessary steps to resolve it. Any insights or suggestions would be appreciated.