Setting Line-Height on a Jstree

Setting line-height on a jsTree?

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

How do I get a jstree node to display long, possibly multiline content?

The following CSS code will do the trick:

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

This is a modification of the solutions here (height changed to auto) and here, neither of which worked for me on their own.

JsTree: Show more options

did you try to use "before_open.jstree" event to show the tree the way you need?
see the example (I use part of the demo page from the jstree site):

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jstree basic demos</title> <style> html { margin:0; padding:0; font-size:62.5%; } body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; } h1 { font-size:1.8em; } .demo { overflow:auto; border:1px solid silver; min-height:100px; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /></head><body> <h1>Interaction and events demo</h1> <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em> <div id="evts" class="demo"></div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>  <script>  // interaction and events $('#evts_button').on("click", function () {  var instance = $('#evts').jstree(true);  instance.deselect_all();  instance.select_node('1'); }); $('#evts')  .on("changed.jstree", function (e, data) {   if(data.selected.length) {    alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);   }  })  .on("before_open.jstree", function (e, data,a,b,c,d) {   $('#' + data.node.id + ' ul li:nth-child(n + 2)').hide();   var str = '<li class="jstree-node  jstree-leaf jstree-last" role="treeitem">press to show ' + $('#' + data.node.id + ' ul li:nth-child(n + 2)').length + ' more items</li>';   var li = $(str).on('click', function(a,b,c,d) {$(a.target).parent().find('li').show(); $(a.target).hide()});   $('#' + data.node.id + ' ul').append(li);  })  .jstree({   'core' : {    'multiple' : false,    'data' : [     { "text" : "Root node", "children" : [       { "text" : "Child node 1", "id" : 1 },       { "text" : "Child node 2" }     ]}    ]   }  }); </script></body></html>

Add a gap between jstree nodes text and scrollbars

I understood that you're trying to add ellipsis before the text be overflowed by div. Accordingly to scrollbars movement, the text would be showing.

Basically, I add a calculation after the plugin triggers the ready.jstree event.

$('#jstree').on('ready.jstree', function() {
    resizeWrap();
});

Please, check my complete solution:
https://jsfiddle.net/alexndreazevedo/qozdy7m8/

How to add strikethrough in the js tree according condition?

With PHP you could have your conditional to set the value of a NULL variable to text-decoration that changes to line-through. This would be done with CSS. Simply have a conditional that checks if the value of $active is set to 0, if it is, then set the value of the null variable to display line-through. If the value of active is anything other than 0, then $strikeThrough will stay NULL and output nothing, therefor no change to text style that is wrapped in span tag.

$strikeThrough = null;
if($active = 0){
$strikeThrough = 'text-decoration: line-through;'
    $output = "<span style='".$strikeThrough."'>" . $rs_wtpname . "</span>";
}
// no change needed for default Active

IN JS, you could use the #folder_jstree nodelist to run through your list and update there. Likely within your colorNodes function you could have a conditional there to check the value of status, then append css to your value if set to 0 (inactive).

If you are unable to get the status from PHP into JS, you could dump the value in the php code using the aforementioned method into an arbitrary data attribute or even alt attribute added to the #folder_jstree element span tag. Then retrieve that using JS and perform your conditional in JS.

EDIT: (April 25th, 2020)

Okay I think I see what you are doing with the JSON and your $folders_array now and how it is saving the data to be parsed in the JSON file.

Try the following code in your php and see if it works.


$folderData = mysqli_query($mysql_con,"SELECT * FROM filing_code_management");
    $arr_sql5 = db_conn_select($folderData);
    foreach ($arr_sql5 as $rs_sql5) {
    $active = $rs_sql5['status']; //--> Here you are setting active state
}
$folders_arr = array();
   while($row = mysqli_fetch_assoc($folderData)){
      $parentid = $row['parentid'];
      if($parentid == '0') $parentid = "#";

      $selected = false;$opened = false;
      if($row['id'] == 2){
         $selected = true;$opened = true;
      }

      //--> this would be the default state of active = 1 set in $output
      $output = $row['name'] . ' ' . "<span id='category'>". $row['category']."</span>";
      //--> Now we see if active is set to 0
      if($active === 0){
          //--> if active is set to 0 change the value of $output to reflect 'text-decoration'
          $output = "<span style='text-decoration: line-through;'>" . $row['name'] . ' ' . "<span id='category'>". $row['category']."</span></span>";
      }
      $folders_arr[] = array(
         "id" => $row['id'],
         "parent" => $parentid,
         "text" => $output, //--> save the proper $output in our array
         "category" => $row['category'],
         "state" => array("selected" => $selected,"opened"=>$opened) 
      );
   }

JTree: variable row height

You assumption is wrong, the row height did not stay the same. The row height is the distance between the top and the bottom of the row, in other words the occupied space between the rows above and beneath it. Your sketch clearly shows a raised distance, and that’s what really happens.

The problem with your expectation is a completely different: you expect the handle to the left of the cell to move upwards staying at the center of the text but the handle remains at the center of the entire cell, including the empty border you have added.

As of Java 7 and BasicLookAndFeel and its descendants (like Windows and Metal) the vertical centering of the handle line is hardcoded in the implementation.

So if you want the handle to stay at the center of the text the only practicable solution is to keep the text centered by adding the empty space equally to the top and the bottom.

how to put an icon on top of jsTree tree

just add a div above the container, like so:

<div>  <img src="star.png"></div><div id="container" role="main" style="height: 430px;">  <div id="tree" class="jstree jstree-1 jstree-default jstree-default-small" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="/" aria-busy="false" style="height: 430px;">    <ul class="jstree-container-ul jstree-children jstree-striped" role="group">      <li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="/_anchor" aria-disabled="true" aria-expanded="true" id="/" class="jstree-node  jstree-open jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor  jstree-disabled" href="#" tabindex="-1" id="/_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>root</a>        <ul role="group"        class="jstree-children">          <li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU1_anchor" aria-expanded="false" id="MENU1" class="jstree-node  jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU1_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU1</a>          </li>          <li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU2_anchor" aria-expanded="false" id="MENU2" class="jstree-node  jstree-closed jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU2_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU2</a>          </li>        </ul>      </li>    </ul>  </div>  <div id="data" style="height: 430px;">    <div class="content code" style="display: none; height: 430px;">      <textarea id="code" readonly="readonly"></textarea>    </div>    <div class="content folder" style="display: none; height: 430px;"></div>    <div class="content image" style="display: none; position: relative; height: 430px;">      <img src="" alt="Sample Image" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;">    </div>    <div class="content default" style="text-align: center; height: 430px; line-height: 430px;">Select a file from the tree.</div>  </div></div>

Setting Line-Height on a Jstree