Placement of context menu

The tooltip of a datatable is placed next to the mouse, regardless of horizontal and vertical scroll positions. The context menu does the same; however, if the page is scrolled in any way, the context menu is not placed next to the mouse. How can I place the context menu directly next to the mouse on right click in the same location that the tooltip would be while allowing for both horizontal and vertical scrolling?

if the page is scrolled in any way, the context menu is not placed next to the mouse.

Can you please provide a snippet? I’m afraid the issue is not clear, as the context menu appears exactly on the needed position on right click:

http://webix.com/snippet/6d330312

Hi, here is a sample of the data I am trying to produce. I took the movies example and added additional columns like I did with my dataset. With the additional columns, the table is larger than the screenwidth and the horizontal scrollbar from the browser kicks in. If I were to scroll to the right and then right click, the context menu will not appear exactly on the needed position of the right click.

webix.ui({
  view:"datatable",
  id:"sampledatatable",
  columns:[
    { id:"rank", header:"", css:"rank", width:50},
    { id:"title", header:"Film title", width:200},
    { id:"year", header:"Released", width:80},
    { id:"filler", header:"filler", width:100},
    { id:"filler2", header:"filler2", width:100},
    { id:"filler3", header:"filler3", width:100},
    { id:"filler4", header:"filler4", width:100},
    { id:"votes", header:"Votes", width:100}
  ],
  autoheight:true,
  autowidth:true,
  data: [
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
    { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2}
  ]
});	

webix.ui({
  view:"contextmenu",
  id:"cmenu",
  master:$$("sampledatatable"), 
  data:["Add","Rename","Delete",{ $template:"Separator" },"Info"],
  on:{
    onItemClick:function(id){
      var context = this.getContext();
      var list = context.obj;
      var listId = context.id;
      webix.message("List item: <i>"+list.getItem(listId).title+"</i> <br/>Context menu item: <i>"+this.getItem(id).value+"</i>");
    }
  }
});

I am able to represent this issue only when an html-container is set:

http://webix.com/snippet/e44db597

So I can confirm a bug, but the only workaround is to avoid containers. Webix has other patterns for sizing and positioning, please check the related article: http://docs.webix.com/desktop__dimensions.html

Thank you, I’ll take a look at this article. Also, is there a way I can append a webix ui to an html header instead of using a div container?