Connectors on SCROLLING BOX do not redraw to the new position of the box jsPlumb

[Shah-S]

(Codepen demo included below.)

Thanks for the helping on this forum. I have been struggling to get the jsPlumb connectors to ‘remain connected and redraw’ to the new position of the scrolling boxes inside another container (overflow-y=auto). There is a lot of discussion about issues similar to this one and I have followed them all, but still have this issue.

Below is a demo of how we need the html elements layed out. Everything works except the connections do not redraw to the new location of the box after scrolling.

Surely I am missing something, but even after pulling my hair for a few days, I am not able to figure it out. I have a feeling that its something to do with the interaction between flexbox/jsPlumb/z-index. Flexbox is used in its very basic use case, and I would prefer to keep using flexbox, so hopefully the problem is not caused by using flexbox.

In the js, I am trying to listen to the ‘scroll’ event (which is listened because the console.log is logging), and then repaintingEverything().

Just FYI: my constraints are that I can not use jQuery and must use only plain javascript. Also, my html elements hierarchy/layout here may seem unusual, but that is how it needs to be for us. I have just simplified our use case here to the basic problem around scrolling and connectors.

Could you please FORK the Codepin below for any corrections and respond with the link to your Codepin? Thanks a lot in advance.

Codepin demo of the problem:

https://codepen.io/Badhumvee/pen/YEwYWE

Fig1: Normal setup of boxes in two layers. Here, the .previous boxes are not overflowing because of enough width of the container, and the arrows are connected correctly.*
enter image description here

Fig2: When the container is shrinked, the .previous boxes overflow and the arrows are drawn correctly when the page is loaded. … but…*
enter image description here

Fig3: … when the .previous boxes are scrolled left, the arrows are still drawn at the original position.*
enter image description here

[Author]

Posts