Cell Height to Match HTML Table Height

GoJS
1

I have built a Gantt chart using your tool which works great!

I am using an HTML table next to the chart which updates the chart when values are changed in the table. The problem I am having is getting the cell height to match the table height. It works great until I either zoom in or out, use a different browser, or use a different screen resolution. Below is an example of the wrong image (notice the mismatched row lines):

image
image1558×595 46 KB

And this is what it should look like (notice the matched row lines):

image
image2691×1019 322 KB

I have tried using px, em, and rem with the table height. Any ideas on what I need to do to get the table row height to match the canvas cell height across browsers, screen resolutions, and zoom levels.

Thanks in advance for any help you can offer.

2

“px” units should work. I just tried it, setting the width and height of an HTML DIV element adjacent to the Diagram’s DIV, and also creating a Node that was exactly the same width and height. Positioning them next to each other showed that they were the same size, even after scrolling or zooming the page.

Of course scrolling or zooming the diagram would cause the node to appear at a different size and position, but I assume that is not what you are concerned about. Absolute positioning within the viewport is a sample Diagram that doesn’t allow scrolling or zooming.

3

Hmm. I can’t figure out why it isn’t working then. Have you tried it and it successfully worked in other browsers too? My td’s have 5px padding and I have a 1px border on the top only. Does yours still work in these scenarios?

4 
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          padding: 0,  // allow parts to rest against viewport's edge
          "InitialLayoutCompleted": function(e) {
            var vb = e.diagram.viewportBounds;
            var n = e.diagram.parts.first();
            // matching CSS position: relative; left: 100px;
            // but accounting for the 1px border around the Diagram
            if (n) n.position = new go.Point(vb.left + 100 - 1, vb.bottom - 20);
          }
        });

    myDiagram.add(
      $(go.Part,
        { background: "green", width: 100, height: 20 }
      ));
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px"></div>
  <div style="display: inline-block; position: relative; left: 100px; background: red; width: 100px; height: 20px"></div>
  <div style="background:black; width: 100px; height: 2000px;"></div>
</body>
</html>
5

Okay, I had the height an width set to 26 and I increased it to 28 for both the table and the gantt chart. This resolved the issue. I wonder if the size I had was too small for the content and that is why it ran into issues. Thanks for your help.