Menus showing up off screen

[justintilson]

I'm trying to get your context menus working in a modal 'window' but they are not displaying where the right click occurs, instead they seem to be hanging off the bottom of the screen. It's not a z-index issue as yours (10000) is way higher than mine (1000). The following screenshot is the best way I can think of to illustrate what is going on:

I'm quite certain I've set up my template as per your instructions.

<template>
  <div>
    <div class="item-wrapper" style="min-height: 500px;">
      <div class="fmgr-folder" v-for="folder in folders">
        <div @contextmenu.prevent.stop="handleClickFolder($event, folder)" class="item-wrapper__item">
          <img src="static/img/file-manager/icon-folder.png" />
          {{ folder.name }}
        </div>
      </div>
      <div class="fmgr-file" v-for="file in files">
        <div @contextmenu.prevent.stop="handleClickFile($event, file)" class="item-wrapper__item">
          <img :src="icon(file)" />
          {{ file.name }}
        </div>
      </div>
    </div>
    <vue-simple-context-menu
      elementId="folder-menu"
      :options="folderOptions()"
      ref="folderContextMenu"
      @optionClicked="optionClicked">
    </vue-simple-context-menu>
    <vue-simple-context-menu
      elementId="file-menu"
      :options="fileOptions()"
      ref="fileContextMenu"
      @optionClicked="optionClicked">
    </vue-simple-context-menu>
  </div>
</template>

CSS is imported and successfully hiding the content of :options

import VueSimpleContextMenu from 'vue-simple-context-menu'
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'

The showMenu function is being called as expected. Seems like a CSS conflict of some sort.

this.$refs.folderContextMenu.showMenu(event, item)

Any suggestions on where to poke at the CSS?

EDIT: If I manually change the top and left values in Chrome's Inspect window, I'm able to get move the menu on to the screen.

[johndatserakis]

Hey there - hmm, yea seems strange as the z-index should be taking care of that. Are you sure the modal component parent has a low z-index set? Maybe it's not set at the root.

The left and top properties are set by the library, dynamically. My guess is that the modal is throwing off the values that the library is getting - like maybe offsetting that by a certain amount.

What modal component are you using? It's tough to get a good idea of what's going on because there could be a lot going on with that. If you can make a simple repro git that demonstrates this issue then I'll dig into it for sure.

I would say - I noticed you have style="min-height: 500px;" set on the item-wrapper. Trying removing that and testing, as maybe that's holding up the process in a weird sorta.

Sorry you're having issues - I'll be standing by.

[justintilson]

I created a stripped down version of my project and your menu system is working fine in that context. I must have some CSS somewhere that is clobbering the generated top/left coordinates.

My project has taken a different turn where I no longer need context menus. I don't think it makes sense to pour any more time into this rabbit hole. Thx for responding.

[kofiasare]

Hi @johndatserakis,
I'm having a similar issue as the above. However, the context menu happens to be positioned farther away from the top.

By inspection, I see that "top left" dynamic values (especially the top) assigned to the element are probably huge.

Please see if you can help me out.

Thanks in advance.

Attached is a screenshot of the challenge.

[johndatserakis]

@justintilson - ok hmm yea maybe something was giving it trouble. Hopefully it goes better next time you try to use it.

@kofiasare - Hmm, the user above wasn't able to replicate the issue in a clean project. Are you able to replicate this in a repro project so I can take a look? Sometimes there may be some other css in your project that's causing an issue.

In my use I really have never had the menu not show up in the right spot so it's tough for me to debug the issue. In your screenshot where did you click to show the menu? The top and left values don't seem too large - but it depends on where you clicked of course.

Let me know.

[johndatserakis]

Hey @kofiasare - any update or reproduction project I can look at to help out? Thanks

[johndatserakis]

Let me know if you continue to have trouble with this - closing for now.

[dnalneh]

I have the same issue and I think it is because I use a vue-instance only on a part (see red border area) of a web-app. The blue spot is the point I clicked to open the menu.

So the width and height of the left respectively top area is added, but should not.

Maybe use clientX over pageX?
https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

[johndatserakis]

Ok let me look into this - thanks a bunch for the link and catching another example of the issue.

[johndatserakis]

Ok so I did some tests using clientX/clientY and I don't think it'll work with the current setup. In reading the stackoverflow post it made a bit of sense - but in practice I don't think it's the right route to take maybe.

Attached are 2 screenshots - one I had my browser full size on my screen, and the second I had the bottom pulled up a bit. As you can see in the second screenshot, the menu is way off. For reference - I clicked right on tip of the J in Jim.

I don't think the issue is due to the pageX/pageY use, but rather things like modals or other popups that change the site structure and then throw off the read.

@dnalneh - do you have an example repo where I can dig into this a bit? I haven't been able to reproduce the issue myself so I'd like to have an example to look into.

[dnalneh]

@johndatserakis
I'm afraid but I'm not allowed to give you some code. I even tried to reproduce it in a simpler example but it works as expected.

This is my current workaround, maybe it will help other people:

       showResultMenu(event, item) {   
                // get left area
                var leftarea = document.getElementById('accordeon_area');

                // overwrite readonly properties pageX and pageY and set correct values
                Object.defineProperty(event, 'pageX', {
                    value: event.pageX - leftarea.clientWidth - 100,
                    writable: true
                });
                Object.defineProperty(event, 'pageY', {
                    value: event.pageY - 50,
                    writable: true
                });
               
                this.$refs.vueSimpleContextMenu1.showMenu(event, item)
            },

[johndatserakis]

Ok great - thanks for that. Maybe if we find out what exactly is causing the once-in-a-while issue then we can implement this fix in real time. I'll be keeping an eye on this.

[drewstaylor]

I have the same issue. The context menu is off-screen, but it seems to be override-able just using one CSS left value with important. I feel it may have to do with the fact my context menus need to popup from a sidebar menu that's already using fixed positioning.

[johndatserakis]

Hmm ok I see - thanks for the detail. Maybe the left !important override can help others who come across this.

Sorry to all for this issue. It's been tough to capture it in action. If anyone has a public example of the issue I'm totally down to dive in. It's definitely a tricky one considering the positioning factors. Hopefully the fixes from @dnalneh and @drewstaylor can help in a pinch.