Paper size change behavior at v1.1.0

There is some change in behaviour of Paper size at v1.1.0 which is breaking my working code from v1.0.3. Tested under IE 11, Firefox & Chrome.

The outline of my code is:

<div id="divPaper" style="width: 640px; height: 590px; overflow-x: hidden; overflow-y: scroll;">
</div>

var $divPaper = $('#divPaper');
var paper = new joint.dia.Paper({
  el: $divPaper,
  width: $divPaper[0]['clientWidth'] - 5,	// excludes any scrollbar, -5 for some rounding error I found
  height: $divPaper[0]['clientHeight'] - 5,	// excludes any scrollbar, -5 for some rounding error I found
  model: graph
});

I have to have a scrollbar to the right of the paper. I believe my use of clientWidth/Height is conceptually correct — that excludes scrollbars & margins, and I want the paper to fill that area.

Immediately prior to the new Paper statement, clientWidth=623, clientHeight=590 in both versions. This seems correct, as the vertical scroller is 17px wide.

In v1.0.3 both measurements remain unchanged after the Paper is created. That is what I expect and seems correct.

In v1.1.0 clientWidth=601, clientHeight=585 after the Paper is created. This is too small, moving my scrollbar over the content.

What is the change in v1.1.0 which is causing this change in behaviour? It seems to be altering my enclosing container DIV to change size! Which of v1.0.3 or v1.1.0 is “correct” or “intended”? If v1.1.0 is correct, how must I change my code to compensate?

[jnbarchan]

Your post beat me to it!!

I just came here to say I have amended my HTML (only, no change to my code) to:

<div id="divPaperWrapper" style="width: 640px; height: 590px; overflow-x: hidden; overflow-y: scroll;">
  <div id="divPaper" style="width: 100%; height: 100%;">
  </div>
</div>

So you are changing divPaper’s width/height, and I have moved the size & scrolling out to divPaperWrapper. Seems to work OK. You would want me to change over to this, right?

You might want to document somewhere that you are now taking control of the outside world’s container’s width/height, because this was a change in behaviour. May I ask why you did it, what you wanted to achieve? (Was it to do with introducing background colouring?)

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.