How to reduce the vertical gap between nodes with jstree? The distance between nodes must be specified in a css file. The icons used have a size of 12 x 12 pixels.
Attached sample of html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jstree</title>
<style>
html { margin:0; padding:0; font-size:45.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
h1 { font-size:2.8em; }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
<h1>jstree</h1>
<div id="frmt" class="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.15/jstree.min.js"></script>
<script>
// data format demo "jstree-file"
$('#frmt').jstree({
'core' : {
'data' : [
{
"text" : "Root 1",
"icon" : "./icon12px-12px.png",
"state" : { "opened" : true,"selected" : true },
"children" : [
{
"text" : "Child node 11",
"icon" : "./icon12px-12px.png"
},
{ "text" : "Child node 12",
"icon" : "./icon12px-12px.png",
}
]
}
]
},
});
</script>
</body>
</html>