I'm working on an app that allows users to mock up the structure of a website. In drag-and-drop mode, the app shows connecting lines to make the structure of the site tree extra-clear. I used div borders to make the connecting lines, which involved some complexities, but I eventually got all the kinks worked out. Or so I thought!
Then I discovered that, when I change from my external monitor to my laptop screen, the connecting lines don't quite match up -- see the screenshots below.
Here's a closeup showing the misalignment on my laptop screen:
If I change the left margin of a particular class of div from -3px to -2px (see the CSS snippet below), that that fixes the alignment on my laptop screen, but then the borders are out of alignment by 1 pixel in the other direction on my desktop monitor. I need those connecting lines to look straight on everyone's display!
Here's the HTML structure of a node in the site tree:
<div class="node selected open" data-node-id="420"><div class="node-title-row"><div class="connector-to-parent-node"></div><div class="twisty"></div><div class="connector-to-icon-and-title"></div><div class="node-icon-and-title"><div class="node-icon"><span class="far fa-file" aria-hidden="true"></span></div><div class="node-title">Contact Us</div></div></div><div class="child-nodes" data-parent-node-id="420"><!-- descendant nodes go here --></div></div>And here's some of the key CSS involved:
.node-title-row { display: flex; flex-direction: row; align-items: stretch;}#site-tree.in-drag-and-drop-mode .node { border-left: 3px solid #AAA;}#site-tree.in-drag-and-drop-mode .node:last-child { border-left: 3px solid transparent;}#site-tree.in-drag-and-drop-mode .node > .node-title-row > .connector-to-parent-node { border-bottom: 3px solid #AAA; margin-right: -7px; /* extend outside boundaries to touch twisty to the right */ flex: none; width: 42px; /* 35px width + 7px overflow */ height: 26px;}#site-tree.in-drag-and-drop-mode .node:last-child > .node-title-row > .connector-to-parent-node { margin-left: -3px; /* needs to be -2px on laptop screen, -3px on external monitor */ width: 45px; /* 35px width + 3px + 7px */ border-left: 3px solid #AAA;}Has anyone encountered a problem like this before? Does it have something to do with screen scaling?
Here's the one clue I've been able to find: when I inspect the "connector-to-parent-node" div on both screens, a difference emerges. On the external monitor, the left border is 3px wide, as specified in my style sheet. On my laptop screen, the browser inexplicably shrinks the border to 2.4px wide. What's up with that?
