Setting line-height on a jsTree?

Question

I'm using jstree to create a multi-level tree, and I want to be able to set a larger line-height than you usually see, so that I can have some large headings. (If I set the font larger, the lines simply overlap.)

I've tried setting the line-height CSS property on the li and a elements, but neither have an effect; jstree seems to be programmatically overriding those values. (I even tried using jQuery to re-set those values after the tree is created, but that didn't help.)

To make things more complicated I would like to have different levels have different spacing, so that the top levels can be larger than the deeper levels.

I've tried the theme plugin but I can't find anything to control line height.

Thanks...

Answer 1

Does it help to increase the height of the element?

.jstree-leaf {
 font-size: 37px;
 height: 50px;
}

.jstree-leaf a.jstree-hovered {
 height: 50px;
}

.jstree-leaf a.jstree-clicked {
 height: 50px;
}

Answer 2

FWIW, this worked nicely for me. It won't give you super-large heading-size, but it increases the size perfectly for my liking.

Setup my tree with variant: large

//jstree config
$("#tree").jstree({
  "core" : {
    "themes" : {
      "variant" : "large"
    }
  }
  // ...
});

and then also change the font-size for all nodes:

/* CSS */    
.jstree-node {
    font-size: 13pt;
}

Answer 3

On its own, MMeah's solution did not work for me. Combining this with the code here and changing the height to auto worked for me. See full answer here.

.jstree-default a { 
    white-space:normal !important; height: auto; 
}
.jstree-anchor {
    height: auto !important;
}
.jstree-default li > ins { 
    vertical-align:top; 
}
.jstree-leaf {
    height: auto;
}
.jstree-leaf a{
    height: auto !important;
}