-1

We have a very simple page layout. Left column (col-4) displays jsTree and right column (col-8) displays relevant data about the selected node. We noticed that jsTree doesn't break node name if it exceeds the column width. This is the code that we have (online demo):

<div class="container">
  <div class="row">
    <div class="col-4 border border-success">
      <div id="jstree_demo_div"></div>
    </div>
    <div class="col-8 border border-danger">
      <p>Hello world</p>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('#jstree_demo_div').jstree({
    'core': {
      'data': [
        'Simple root node with a very long name which will overflow to the right container'
      ]
    }
  });
});

This is how it looks like: LINK.

How can we break node text in multiple lines if it exceeds the column width?

Mike Wilson
  • 1
  • Does this answer your question? [wrapping leaf text in jstree](https://stackoverflow.com/questions/15070859/wrapping-leaf-text-in-jstree) – Dorad Sep 08 '22 at 06:53

1 Answers1

0

You can add white-space: break-spaces to jstree-anchor class to break the line, and height: auto instead of fixed 24px.

$(document).ready(function () {
    $("#jstree_demo_div").jstree({
        core: {
            data: [
                "Simple root node with a very long name which will overflow to the right container"
            ]
        }
    });
});
.left-container {
    overflow-x: hidden
}

.jstree-anchor {
    white-space: break-spaces !important;
    height: auto !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" integrity="sha512-pg7xGkuHzhrV2jAMJvQsTV30au1VGlnxVN4sgmG8Yv0dxGR71B21QeHGLMvYod4AaygAzz87swLEZURw7VND2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js" integrity="sha512-TGClBy3S4qrWJtzel4qMtXsmM0Y9cap6QwRm3zo1MpVjvIURa90YYz5weeh6nvDGKZf/x3hrl1zzHW/uygftKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
    <div class="row">
        <div class="col-4 border border-success left-container">
            <div id="jstree_demo_div"></div>
        </div>
        <div class="col-8 border border-danger">
            <p>Hello world</p>
        </div>
    </div>
</div>
Mina
  • 14,386
  • 3
  • 13
  • 26
  • Thank you for the suggestion. It works fine. Unfortunately, it doesn't work if we use `wholerow` plugin. What changes do we need to make for it to work with `wholerow` plugin as well? – Mike Wilson Sep 08 '22 at 07:49
  • I'm not sure what is wholerow plugin, please create an example with codepen. – Mina Sep 08 '22 at 07:59
  • Please check the updated CodePen [here](https://codepen.io/aleksvujic/pen/OJZMmyB). I added `plugins: ["wholerow"]` to jsTree configuration. – Sam Carlson Sep 08 '22 at 08:34