Cannot scroll page even after disabling zoom

I’m submitting a … (check one with “x”)

[ x ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here

Current behavior When there is other content on the page, say an ngx-bar-chart, scrolling up and down on the page does not work even after disabling zoom.

Expected behavior

Scrolling should work normally if it is not being used for zooming on the graph.

Reproduction of the problem

See stackblitz: https://stackblitz.com/edit/angular-tcg69j

What is the motivation / use case for changing the behavior?

Integrating the ngx-graph into a page alongside other components

Please tell us about your environment:

OSX, Google Chrome, Angular cli

• ngx-graph version: x.x.x

    "@swimlane/ngx-charts": "^8.1.0",
    "@swimlane/ngx-graph": "^5.1.0",

• Angular version: x.x.x

    "@angular/animations": "^6.0.9",
    "@angular/cdk": "^6.3.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.3.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

    "typescript": "~2.7.2"

[toski112]

I am using the latest version, the problem appears when the graph is rendered and the zoom is off. Scroll on the page works until you move to the graph. I can not turn off the pointer events, because I have the attached function (click) on the nodes.

EDIT

I see that the demo from the link on github also this error occurs. Just add an element to the container to show the scroll on the page and try to scroll when the zoom in the graph is off.

SOLVED:

I’ve solved the problem, we add the class pointer-events: none to the container with the graph, and in each element that has to be clickable in the graph should have a style allowing for mouse events eg pointer-events: all. Thanks to this, the graph does not interfere with scrolling the page, but you can click on its elements. I hope it will be useful to someone.

[assafsun]

Thanks for the update.

I’m closing this issue as you offered a solution which can help in this specific case.