Problems resizing the diagram


I have a problem in resizing the canvas element of the main diagram.
In my HTML code, I have a button that resize the width of the div element of my diagram. In the HTML, the diagram is defined just as:

In my Javascript code, my diagram is defined as follows:

myDiagram = $(go.Diagram, “myDiagram”,
allowDrop: true, // accept drops from palette
initialContentAlignment: go.Spot.Center, // Center Diagram contents
“linkingTool.linkValidation”: sameLevel, // links cannot go outside or inside a group (macro activity)
“relinkingTool.linkValidation”: sameLevel,
“undoManager.isEnabled”: true // enable Ctrl-Z to undo and Ctrl-Y to redo

myDiagram.model = $(go.GraphLinksModel,
linkFromPortIdProperty: “fromPort”,
linkToPortIdProperty: “toPort”

After clicking in that button, a right menu is collapsed. So, the diagram should expand to fill the empty space left by the right menu. I have this Javascript code that is run after clicking in that button:
$(’#right_menu’).hide(100, function()
$(’#MenuAndDiagram’).animate({width: “92%”}, {duration: 200});

"#right_menu" is a div in the right side of the diagram (the right menu). “#MenuAndDiagram” is a div where it is the diagram and a menuBar at the top. The “myDiagram” element has a CSS width of 100%, so it is automatically updated.

Looking to the inspector menu of Chrome, I’ve noticed that the width of the (inside “#myDiagram”) is not updated after I update the width of the diagram. Because of this, the diagram don’t expand correctly. Just if I click in the diagram and I try to drag the background, the updates its size.

I’ve looked to the documentation and tried several functions such as:
But nothing worked.

I’ve also tried these proprieties in defining the diagram:
autoScale: go.Diagram.UniformToFill,
initialAutoScale: : go.Diagram.UniformToFill,
But it didn’t work, also.

Can you please help me? If it is necessary any further information please say to me. I am portuguese so, sorry if I’m not clear. If I’m not clear, please ask me :)

I think this page addresses your situation: Introduction: Resizing Diagrams.

So calling requestUpdate() should have worked. But perhaps you were calling it too early? You need to wait until the page layout is finished.


I think this page addresses your situation: Introduction: Resizing Diagrams.

So calling requestUpdate() should have worked. But perhaps you were calling it too early? You need to wait until the page layout is finished.[/quote]

You are right, it seems I was calling it too soon. I set a TimeOut and it worked. I will analyse it further trying to avoid the Timeout.

By the way, during my research I discovered that requestUpdate() is deprecated in the changelog (in Changes for 1.1 since 1.0.* it says “Added Diagram.delayInitialization, replacing the now deprecated update and requestUpdate methods.”). delayInitialization() is more correct, so?

Thank you so much for your quick reply!

We shouldn’t have documented that method, since it can be abused. Your situation isn’t an initialization issue, so Diagram.delayInitialization isn’t appropriate for you. In the future in some browsers we might be able to figure out a way to detect without polling whether the DIV has changed size, but we didn’t want to do that now since that would add yet another case where there would be meaningful differences in behavior between browsers.

Ok, thank you one more time!