On IE if the size of browser window is such that, there appears scroll bar on a dialog box having GoJS diagram, the button doesn’t work. The only way left to close the dialog box, is to use the browser’s back button. But,this works fine on Chrome and Firefox.
What is missing here?
How are you creating the dialog box that holds the diagram?
Dialog box is created using a XML file like this:
<dialog datasrc="MAINRECORD" id="my_dialog_box" label="My Dialog Box" width="1200">
<section id="my_section_1">
...
</section>
</dialog>
“Close” Button is a GoJS button.
This seems odd. Can you put this up somewhere so we can take a look?
Sorry, not possible to put any code for this.
But, you can use a simple html file which is having a html button, which when clicked opens a html dialog box. This dialog box is having 2 divs, one div having some gojs nodes and other div having a gojs button at the bottom right corner.
Now increase the browser size such that, when click on the html button, a html dialog box is opened with the scroll bars as shown in the above figure. Now, try to click the gojs button. In my case, click event is not working for this button.
Why are you using a GoJS button? Couldn’t you just use a regular HTML button to close the dialog?
No, i can’t use html button. I need to use only GoJS button. On my env, i can’t use HTML directly, need to use XMLs, where i can add a button only to open this dialog box, but to close this dialog box i need to use GoJS button only.
And, issue is occurring only on IE. my IE version: 11 and 10.
What is happening here is that:
when the mouse button is pressed on the GoJS container, the dialog box page immediately scrolls to position where left=0. At this point, probably the event is cancelled so that the button never receives a click event.
I’m still not clear how you are setting up your dialog. Are there two different diagrams, one with some nodes, and one that just has a button? Or is it one diagram with a button positioned at the bottom right?
It would be much easier if you could provide us a simple example that reproduces the problem on codepen, jsfiddle, etc.
Yes, there are 2 different diagrams (2 divs - one over the other), above one with some nodes and lower one with a button at the bottom right.
you can use a simple html file which is having a html button, which when clicked opens a html dialog box. This dialog box is having 2 divs (one over the other), above div having some gojs nodes and lower div having a gojs button at the bottom right corner.
Now increase the browser size such that, when click on the html button, a html dialog box is opened with the scroll bars as shown in the above figure. Now, try to click the gojs button. In my case, click event is not working for this button.
I can’t get this working in IE. According to MDN, IE doesn’t support the <dialog> element. Are you using a polyfill?
No, i’m not using polyfill. I’m working on a real complex product which works using XMLs which in turn generates the UI. I don’t have access to html directly for creating UI elements.
Well, using basic HTML, I can’t reproduce this, so I can’t really help. Maybe you can generate an HTML button through your XML.
Sorry, i couldn’t create a sample with XML.
But, reproduced the same problem on a GoJS page ( GoJS Buttons -- Northwoods Software )
Steps to reproduce:
So, The Problem is that :
When you click on the button after scrolling to reach it, it gets the selection of the canvas but not the click on the button.
when the canvas is selected it position it so that the initial part of the canvas is visualized, and scrolls to the beginning.
This is because the Diagram Div does not have focus until you click on it once, after which it is brought into focus, but this “bringing into focus” also moves the diagram, so the end of the mouse click happens elsewhere.
One way to fix this is to set Diagram.scrollsPageOnFocus to false.
Thanks @simon
I have tried to use scrollsPageOnFocus like this:
myCloseDiagram =
$(go.Diagram, "myCloseDiagramDiv",
{
isReadOnly: true,
"animationManager.isEnabled": false,
contentAlignment: go.Spot.Right,
allowHorizontalScroll: false,
allowVerticalScroll: false,
allowZoom: false,
padding: 2
});
myCloseDiagram.scrollsPageOnFocus = false;
But, still not working.
What is happening? And what browser are you using?
I’m using IE10. Issue is occurring on IE only, not on Chrome or FireFox.
When i click on the button, page scrolls back to the left side.
Hi @simon,
I tried to use a solution, which you provided for a similar problem at : goJS diagram eating mouse up event - #12 by simon
Solution provided:
var mouseOnDiagram = false;
myDiagram.toolManager.doMouseDown = function () {
go.ToolManager.prototype.doMouseDown.call(this);
mouseOnDiagram = true;
};
myDiagram.toolManager.doMouseUp = function () {
go.ToolManager.prototype.doMouseUp.call(this);
mouseOnDiagram = false;
};
myDiagram.doFocus = function() {
if (mouseOnDiagram) this.focus();
};
But problem is that, it’s working for once only.
Means, suppose am on a UI, where there are 3 buttons in a div. If I click on one of the button in the div, it will work, but after that, if i click on another button in the same div, it again behaves like it was behaving earlier, taking Canvas to left=0.
Sorry, apparently for this feature IE10 has some kind of bug. This seems to be something fixed in IE11 and Edge.
I’m not sure if there is an acceptable workaround that can accomodate 10 here.