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:
document.getElementById("nodeContent").className = "div.nodeContent";document.getElementById("nodeContent").style.wordBreak = "break-all";
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>CodePudding user response：
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>CodePudding user response：
The answer to the second question is in the code below, showing how can you markup text in javascript.
(note: I moved the id of the pre-tag to the div because it was confusing to have a class and an id with the same name)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
float: left;
}
#nodeContent {
position: relative;
border: 1px solid lightgray;
width: 480px;
height: 780px;
margin-left: 810px;
padding: 10px;
overflow-wrap: break-word;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div> Click on node 1</div>
<div id="mynetwork"></div>
<div id="nodeContent">
<pre>click on node 1 to see content</pre>
</div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([{
id: 1,
label: "Node 1",
info1: "<h3>Title</h3>",
info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\"http://bing.com\">Bing</a>. </p>',
info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\">",
},
{
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).info1 nodes.get(nodeId).info2 nodes.get(nodeId).info3; // shows the data in the div
}
});
</script>
</body>
</html>