19

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);

6 Answers 6

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')
    ;
}
2
  • The wholerow plugin tip was what I was looking for.
    – SNag
    Commented May 24, 2017 at 13:16
  • 1
    Great answer! This worked for me but for trees that had preselected data, it didn't. I used the following:<br/> $(#tree').bind 'open_node.jstree', -><br/> bar = $(this).find('.jstree-wholerow-clicked')<br/> bar.css 'height', bar.parent().children('a.jstree-anchor').height() + 'px'
    – TwiceB
    Commented Feb 2, 2018 at 18:37
11

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;
}
0
1
#tree_id {
  .jstree-anchor {
    white-space: normal;
    height: auto;
  }
  .jstree-default .jstree-anchor {
    height: auto;
  }
}
1

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');
});
0

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;
}
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.