Comments (9)
I think I found what triggers this now. The doctype of your example is <!DOCTYPE>
(so quirks mode I assume), but changing this to <!DOCTYPE html>
results in the offset that we're seeing in the JSFiddle. This is probably not the ultimate cause of the issue, but it might help in tracking it down.
from cytoscape.js-cxtmenu.
Not reproducible for me on Mac 10.13.6 for both of Chrome 71.0.3578.80 and Firefox 63.0.3.
from cytoscape.js-cxtmenu.
I'm on Mac 10.14.1, updated my browsers and disabled all plugins, but the issue remains.
from cytoscape.js-cxtmenu.
Same problem here on Mac 10.12.6.
Firefox 65.0.1 / Chrome 72.0.3626.119 have this issue for me but it works fine in Safari 12.0.3.
And it looks like the more you scroll, the more offset it is. I changed the cy css height property to height: 10000px
in the fiddle provided in the initial comment, and when triggering the context menu of the bottom node, the pointer barely even move.
from cytoscape.js-cxtmenu.
This is an odd issue. I can't reproduce it outside of JSFiddle.
This is your code pasted into the demo page:
<!DOCTYPE>
<html>
<head>
<title>cytoscape-cxtmenu.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link href="https://unpkg.com/[email protected]/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="cytoscape-cxtmenu.js"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
background-color: red;
height: 1000px;
width: 50%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{
group: 'nodes',
data: {
id: 'n1'
}
},
{
group: 'nodes',
data: {
id: 'n2'
}
},
{
group: 'edges',
data: {
source: 'n1',
target: 'n2'
}
}
]
});
var menu = cy.cxtmenu({
commands: [{
content: 'testing',
select: () => console.log('testing')
}, {
content: 'testing2',
select: () => console.log('testing2')
}, {
content: 'testing3',
select: () => console.log('testing3')
}]
});
});
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
You can replace the demo page with this one to test. See the screen capture:
Can you reproduce the issue with this file or a modified version of this file?
from cytoscape.js-cxtmenu.
Just like you, I cannot reproduce the issue using the demo page. I've tried to modify it with different nested element structures, and having other elements push down the network container, but it still works as it should. I'm starting to suspect that the issue is due to some element/style combinations in the project where I'm seeing this issue, as well as in the JSFiddle. If I ever manage to pinpoint the cause, I will let you know here.
from cytoscape.js-cxtmenu.
Hello, when can we have this fix merged? I just installed the pkg but the previous commit was not there and I am having this issue. Thanks
from cytoscape.js-cxtmenu.
I used this page for testing, based on @maehler's suggestion:
<!DOCTYPE html>
<html>
<head>
<title>cytoscape-cxtmenu.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link href="https://unpkg.com/[email protected]/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="cytoscape-cxtmenu.js"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
background-color: red;
height: 1000px;
width: 800px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{
group: 'nodes',
data: {
id: 'n1'
}
},
{
group: 'nodes',
data: {
id: 'n2'
}
},
{
group: 'edges',
data: {
source: 'n1',
target: 'n2'
}
}
]
});
var menu = cy.cxtmenu({
commands: [{
content: 'testing',
select: () => console.log('testing')
}, {
content: 'testing2',
select: () => console.log('testing2')
}, {
content: 'testing3',
select: () => console.log('testing3')
}]
});
});
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
You can use the arrow keys to scroll the page both vertically and horizontally to test. Note that @deelef's commit only addresses the vertical scroll. To make contributions to any of the Cytoscape.js packages, please make pull requests in future.
from cytoscape.js-cxtmenu.
Included in v3.1.1 : https://www.npmjs.com/package/cytoscape-cxtmenu/v/3.1.1
from cytoscape.js-cxtmenu.
Related Issues (20)
- Would it be possible to set the menuRadius based on the element size? HOT 3
- Ignored attempt to cancel a touchend event with cancelable=false HOT 2
- How to make rectangle Context menu?
- With a menu on a node, passed element is often a different empty node. HOT 4
- Displaying Menu commands based on condition HOT 4
- Support other events? HOT 1
- Context menu opens again when I click on it above a node HOT 1
- Icons not displayed for a split second when opening menu for first time HOT 2
- Contextmenu on Node/Edge and Core(Background) HOT 3
- Hover Event/Function menu items HOT 6
- CSS Variable support for fillColor and activeFillColor HOT 3
- Support for other cytoscape shapes HOT 3
- How to add tooltips to menu entries? HOT 6
- event/function to get the position of the cxtmenu on the cytoscape graph? HOT 4
- ¿How to show menu only on node:parent ? HOT 1
- incompatible ie11 HOT 2
- Referencing to static image files HOT 1
- Why this menu is not centered on the node HOT 1
- Use application context inside commands HOT 1
- What could explain a misaligned overlay? HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cytoscape.js-cxtmenu.