Chris Go Chris Go - 4 months ago 32
HTML Question

JSTree Remove Left Space Gap Before Checkbox

I set icons to false and have been checking the CSS for a quick fix on this issue but no luck. I created an example and you can see it has a huge amount of space on the left of each checkbox. It would seem if I remove the class="jstree-icon jstree-ocl" from the li object in the output source it does go away. Is there a way to do this in the theme options?



$(function() {
$("#YearContainer").jstree({
"plugins": ["wholerow", "checkbox"],
core: {
"themes": {
"icons": false,
"dots": false,
"responsive": false,
"stripes": true
}
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="YearContainer">
<ul>
<li>
2010
<ul>
<li>
2010A
</li>
<li>
2010B
</li>
</ul </li>
<li>
2011
</li>
<li>
2012
</li>
<li>
2013
</li>
<li>
2014
</li>
<li>
2015
</li>
</ul>
</div>




Answer

An easy fix would just be to set the extra icon space to display:none like so:

.jstree-node.jstree-leaf > .jstree-icon.jstree-ocl {
    display: none;
}

$(function() {
  $("#YearContainer").jstree({
    "plugins": ["wholerow", "checkbox"],
    core: {
      "themes": {
        "icons": false,
        "dots": false,
        "responsive": true,
        "stripes": true
      }
    }
  });
});
.jstree-node.jstree-leaf > .jstree-icon.jstree-ocl {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="YearContainer">
  <ul>
    <li>
      2010
    </li>
    <li>
      2011
    </li>
    <li>
      2012
    </li>
    <li>
      2013
    </li>
    <li>
      2014
    </li>
    <li>
      2015
    </li>
  </ul>
</div>