javascripthtmldominnerhtmlvis.js-network

How can I show a text-output from javascript innerhtml in a div-box without the text overflowing and with html/css styling


I am using [vis.js library][1] to display a network. When you click on a node it should display an info-text about the node in the div-box on the right. Somehow the text which is collected from the javascript and send to the divbox using *.innerhtml* is not being wrapped inside the div-box and I can't style it.

Image of how it shows now
Image of how i want it to be

Question 1 How can I get the text to stay in the div?
Question 2 And when it's wrapped in the div can I style it with headers and add images like in normal html/css, or should I use another solution?

I am not an experienced coder so maybe I am not using the right method.

What I've tried so far

It looks like the common word-break and overflow-wrap for html/css dont work here because this is output from javascript. The innerhtml can be modified via the DOM style properties like the overflow property.

What I tried to wrap the text was adding:
document.getElementById("nodeContent").style.overflow = "auto";
This works showing scrollbars, but i want to show the complete text in the divbox.

Other things I tried and didn't work was adding those:

This is the code

<!doctype html>
<html>

<head>


  <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>

  </style>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
      float: left;
    }
    
    div.nodeContent {
      position: relative;
      border: 1px solid lightgray;
      width: 480px;
      height: 780px;
      margin-left: 810px;
      padding: 10px;
      overflow-wrap: break-word;
    }
  </style>
</head>


<body>
  <div> click on node 1</div>
  <div id="mynetwork"></div>

  <div class="nodeContent">
    <pre id="nodeContent"></pre> </div>



  <script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([{
        id: 1,
        label: "Node 1",
        info: "Large text is out of the div when it's too long Large text is out of the div when it's too long Large text is out of the div when it's too long"
      },
      {
        id: 2,
        label: "Node 2"
      },
      {
        id: 3,
        label: "Node 3"
      },
      {
        id: 4,
        label: "Node 4"
      },
      {
        id: 5,
        label: "Node 5"
      },
    ]);

    // create an array with edges
    var edges = new vis.DataSet([{
        from: 1,
        to: 3
      },
      {
        from: 1,
        to: 2
      },
      {
        from: 2,
        to: 4
      },
      {
        from: 2,
        to: 5
      },

    ]);

    // create a network
    var container = document.getElementById("mynetwork");
    var data = {
      nodes: nodes,
      edges: edges,
    };
    var options = {};
    var network = new vis.Network(container, data, options);


    network.on("click", function(params) {
      if (params.nodes.length > 0) {
        var nodeId = params.nodes[0]; // get the data from selected node

        document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info; // show the data in the div 

      }
    });
  </script>

</body>

</html>

Solution

  • Use the white-space: pre-wrap for your pre tag.

    <!doctype html>
<html>

<head>


  <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>

  </style>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
      float: left;
    }
    
    div.nodeContent {
      position: relative;
      border: 1px solid lightgray;
      width: 480px;
      height: 780px;
      margin-left: 810px;
      padding: 10px;
      overflow-wrap: break-word;
    }
    div>pre{
  white-space: pre-wrap
}
  </style>
</head>


<body>
  <div> click on node 1</div>
  <div id="mynetwork"></div>

  <div class="nodeContent">
    <pre id="nodeContent"></pre> </div>



  <script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([{
        id: 1,
        label: "Node 1",
        info: "Large text is out of the div when it's too long Large text is out of the div when it's too long Large text is out of the div when it's too long"
      },
      {
        id: 2,
        label: "Node 2"
      },
      {
        id: 3,
        label: "Node 3"
      },
      {
        id: 4,
        label: "Node 4"
      },
      {
        id: 5,
        label: "Node 5"
      },
    ]);

    // create an array with edges
    var edges = new vis.DataSet([{
        from: 1,
        to: 3
      },
      {
        from: 1,
        to: 2
      },
      {
        from: 2,
        to: 4
      },
      {
        from: 2,
        to: 5
      },

    ]);

    // create a network
    var container = document.getElementById("mynetwork");
    var data = {
      nodes: nodes,
      edges: edges,
    };
    var options = {};
    var network = new vis.Network(container, data, options);


    network.on("click", function(params) {
      if (params.nodes.length > 0) {
        var nodeId = params.nodes[0]; // get the data from selected node

        document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info; // show the data in the div 

      }
    });
  </script>

</body>

</html>