Potential Offset Issue

[nickmarkfurness]

Hi,

I have the example working in my application except the menu doesn't appear where i click.
I have the component on a view that is used by the rotuer view.
I used a chrome extension to verify the x and y co-ords of the event passed to showMenu() and it is all correct except the menu not displaying where i expect.
I manually edit the menu once it has appeared and set of the top and left to 0 and the menu then goes into the corner of my router view.
When i use chrome dev tool to cut and paste the menu and place it below the tag then it displays in the correct place.
Is there a way to specify which element the menu attaches it too? Or am i just doing something wrong??

[johndatserakis]

Hi there @nickmarkfurness, hmm I see what you're saying. Yea it seems like in some cases, on certain layers, like modals or other overlays, there is an issue with the positioning. Issue #8 also has a bit of discussion around this.

I like the idea of allowing the ability to optionally attach to an element. I'll take a stab at getting that done as soon as I have some time coming up. Thank you.

[nickmarkfurness]

My work around is to get the div and append to the body tag on the on mounted() event. This seems to work fine for me so far ...
The mouse co-ords work on the view port of the page so maybe this is done no matter what??
I have yet to check if moving it stops Vue from any potential cleanup issue and if i need to do this on the beforeDestroy() event

[rttmax]

For me the problem was caused by css-transformed parent-elements.
I'm creating the menus dynamically when they are needed and append the markup directly to the body to get over this.

   handleContextMenu(e, i) {
      const ComponentClass = Vue.extend(VueSimpleContextMenu)
      const instance = new ComponentClass({
        store: this.$store,
        propsData: {
          ref: 'contextMenu',
          elementId: 'contextMenu',
          options: [
            {
              name: 'use',
              slug: 'use'
            }, ...
          ]
        }
      })
      instance.$on('menu-closed', () => {
        instance.$destroy()
        instance.$el.parentNode.removeChild(instance.$el)
      })
      instance.$mount()
      document.body.appendChild(instance.$el)
      instance.showMenu(e, i)
    }

Because I need to delete and destroy the component after use I added the 'menu-closed'-event.

[johndatserakis]

Closing for now, will open again if needed.