Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Paper size change behavior at v1.1.0

See original GitHub issue

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;">

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?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

jnbarchancommented, Apr 13, 2017

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%;">

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]commented, May 6, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Printer Is Configured to Use the Wrong Paper Size
Click the Paper tab, and then click the paper size you want to use in the Paper Size box. Click OK, and then...
Read more >
Edit Paper Sizes Dialog - Bentley - Product Documentation
Printer Driver Configuration dialog: on the Paper Sizes tab, select the Define paper sizes check box, select a paper size, and click the...
Read more >
CIS Microsoft Office Word 2016 v1.1.0 | Tenable® Ensure 'Document Behavior if File Validation Fails' is set to Enabled (Open in Protected View) Unchecked for 'Do not allow edit'.
Read more >
Lung‐RADS® Version 1.1 - Assessment Categories
Behavior. Nodules with a very low likelihood of becoming a clinically active cancer due to size or lack of growth. 2. Perifissural nodule(s)...
Read more >
TriCCo v1.1.0 – a cubulation-based method for computing ...
We document the package and demonstrate its application using simulation output from the ICON atmosphere model. Finally, we characterize its ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found