Add a gap between jstree nodes text and scrollbars

Question

I have a simple jstree in a container that is smaller than the tree:

<div style="width:250px;height:150px; border:solid; overflow: auto;">
  <div id="jstree" style="padding:20px"></div>
</div>

see demo at plunkr

I am trying to add a visual space (ie of 5px) between the visible portion of the node's text and the scrollbars. so that there is a gap between the end of a chopped line and the vertical scrollbar and the chopped lines have '..' in the end, and a gap between the bottom of the tree and the horizontal scrollbar.

I have looked at many posts here and tried various combinations of padding, margins, wrapping divs etc but no success.

The solution I am looking for is:

• ideally css only
• adds a gap between the visible portion of the node's text and both the horizontal and the vertical scrollbar
• adds ellipsis to truncated node's text
• works with jquery.scrollbar

thx!

Answer 1

Hi here is a workaround for this issue... kindly check https://jsfiddle.net/RRR0308/jfu845zr/ ... I have inserted a absolute positioned div into main div and have set the height and width so that it gives the effect of 10px margin.

HTML

<div style="width:250px;height:150px; border:solid; overflow: auto;">
      <div id="jstree" style="padding:20px"></div>
      <div class="xyz"></div>
</div>

CSS

.xyz{
  position:absolute;
  height:133px;
  width:10px;
  background:#F3F5F6;
  z-index:999;
  top:11px;
  left:235px;

}

Updated Demo: https://jsfiddle.net/RRR0308/jfu845zr/3

Answer 2

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/