wrapping leaf text in jstree

Question

I am using jstree plugin to populate my tree based on xml file. Some nodes text are greater than the container div. Is there any way to text wrap jstree node texts?

$(document).ready(function(){
     $("#tree").jstree({  
         "xml_data" : {  

             "ajax" : {  

                 "url" : "jstree.xml" 

             },  

             "xsl" : "nest"


         },  
         "themes" : {  

             "theme" : "classic",  

            "dots" : true,  

             "icons" : true 

         },  

        "search" : {  

                 "case_insensitive" : true,  

                 "ajax" : {  

                     "url" : "jstree.xml" 

                 }  

             },  
              "plugins" : ["themes", "xml_data", "ui","types", "search"] 


    }).bind("select_node.jstree", function (event, data) {

        $("#tree").jstree("toggle_node", data.rslt.obj);

Hashbrown · Answer 1 · 2018-07-06T06:30:07.907

18

This worked for 3.0.8

.jstree-anchor {
    /*enable wrapping*/
    white-space : normal !important;
    /*ensure lower nodes move down*/
    height : auto !important;
    /*offset icon width*/
    padding-right : 24px;
}

And for those using the wholerow plugin;

//make sure the highlight is the same height as the node text
$('#tree').bind('hover_node.jstree', function() {
    var bar = $(this).find('.jstree-wholerow-hovered');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});

For 3.1.1, and for it to also work with select_node.jstree use this function instead:

function(e, data) {
    var element = $('#' + data.node.id);
    element
        .children('.jstree-wholerow')
        .css('height', element.children('a').height() + 'px')
    ;
}

edited Jul 06 '18 at 06:30

answered Dec 01 '14 at 06:04

Hashbrown

12,091
8
72
95

The `wholerow` plugin tip was what I was looking for. – SNag May 24 '17 at 13:16
1

Great answer! This worked for me but for trees that had preselected data, it didn't. I used the following:
`$(#tree').bind 'open_node.jstree', ->`
`bar = $(this).find('.jstree-wholerow-clicked')`
`bar.css 'height', bar.parent().children('a.jstree-anchor').height() + 'px'` – TwiceB Feb 02 '18 at 18:37

score 11 · Answer 2 · answered Dec 10 '13 at 20:51

Try adding the following style to the child anchors of your jsTree div:

#jstree_div_id a {
    white-space: normal !important;
    height: auto;
    padding: 1px 2px;
}

I also have a max-width on my jsTree div styling:

#jstree_div_id
{
    max-width: 200px;
}

score 1 · Answer 3 · answered Jul 02 '14 at 16:33

1

#tree_id {
  .jstree-anchor {
    white-space: normal;
    height: auto;
  }
  .jstree-default .jstree-anchor {
    height: auto;
  }
}

answered Jul 02 '14 at 16:33

rexmadden

266
4
7

score 1 · Answer 4 · answered Jan 17 '19 at 23:34

Putting together answers from Hashbrown and TwiceB to get it to work with the wholerow plugin and preselected data.

Enable text wrapping

.jstree-anchor {
    /*enable wrapping*/
    white-space : normal !important;
    /*ensure lower nodes move down*/
    height : auto !important;
    /*offset icon width*/
    padding-right : 24px;
}

Enable highlighting of wrapped text on hover and select

$('#tree').bind('open_node.jstree', function () {
    let bar = $(this).find('.jstree-wholerow-clicked');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});
$('#tree').bind('hover_node.jstree', function () {
    var bar = $(this).find('.jstree-wholerow-hovered');
    bar.css('height',
        bar.parent().children('a.jstree-anchor').height() + 'px');
});

score 0 · Answer 5 · answered May 19 '15 at 11:05

I found the answer by coincedence and it worked for me ,but , i had another css rule that was preventing the code from functioning well

I removed the css rule (min-height:200px) "in my code" and the following answer worked for me as i expected.

#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}

Takuya Motoshima · Answer 6 · 2021-11-18T04:00:24.677

This issue is resolved below.

https://www.npmjs.com/package/treeview-sample

According to this sample, the folder DOM will be output with the following contents.

<a class="jstree-anchor jstree-anchor-formatted" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="3" id="grandchild2_anchor" title="Human">
  <i class="jstree-icon jstree-themeicon" role="presentation"></i>
  <span class="jstree-anchor-text">Human</span>
</a>

wrapping leaf text in jstree

6 Answers6

Linked