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