test/network/maximumWidthEdgeCase.html from almende/vis

test/network/maximumWidthEdgeCase.html
Summary

Maintainability

Test Coverage

Issues
<!doctype html>
<html>
<head>
  <title>Maximum Width Edge Case Test</title>

  <script src="../../dist/vis-network.min.js" type="text/javascript"></script>
  <link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../../googleAnalytics.js"></script>
</head>

<body>

<p>A word in a label that's wider than the maximum width will be forced onto a line. We can't do better without breaking the word into pieces, and even then the pieces could still be too wide.</p>

<p>Avoid the problem. Don't set ridiculously small maximum widths.</p>

<div id="mynetwork"></div>

<script type="text/javascript">
  var nodes = new vis.DataSet([
      { id: 1, label: 'Node 1', widthConstraint : { maximum : 30 } }
  ]);

  var edges = [];

  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    edges: {
      font: {
        size: 12
      },
      widthConstraint: {
        maximum: 90
      }
    },
    nodes: {
      shape: 'box',
      margin: 10,
      font: {
        multi: true
      },
      widthConstraint: {
        maximum: 200
      }
    },
    physics: {
      enabled: false
    }
  };
  var network = new vis.Network(container, data, options);
</script>

</body>
</html>