Code Monkey home page Code Monkey logo

Comments (6)

vakata avatar vakata commented on July 21, 2024

I cannot reproduce this - I believe it is something from your own css. Try opening the demo that comes with jstree and take a look at "use css to make nodes bigger" demo - I have no white lines.
If you still have the issue - can you please repost the issue with more data about your browser and maybe a snippet?

Kindest regards,
Ivan

from jstree.

vakata avatar vakata commented on July 21, 2024

Oh, and checkout the latest version :)

from jstree.

maltus avatar maltus commented on July 21, 2024

I reproduced this problem under ie9. Just add 'overflow-x:auto' to main element for tree and use fixed width. For example:
jQuery("#object-tree").jstree({ ...
..
<div id="object-tree"></div>
..
#object-tree {
overflow-x: auto;
overflow-y: hidden;
}
...
scroll have to be visible.

from jstree.

khanderson avatar khanderson commented on July 21, 2024

I'm having exactly this problem, I would guess the "white lines" result from a calculation that fails to account for the scrollbar. I'm using jsTree 1.0-rc3, which I downloaded from www.jstree.com pretty recently. IE is 9.0.8112.

Here's a full example. When the scrollbar is visible, #folder-tree-container gets bigger every time you hover over or out of any node in the tree. Any help appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <script src="/javascripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script src="/javascripts/jstree/jquery.jstree.js" type="text/javascript"></script>

  <style type="text/css">
     #folder-tree-container {
       overflow: auto;
       border: 1px solid purple;
       margin-bottom: 0;
       width: 140px;
     }

     #folder-tree {
       min-height: 40px;
       margin: 6px 4px 10px 6px;
       border: 1px solid red;
     }
  </style>

</head>

<body>
  <div id="folder-tree-container">
    <div id="folder-tree">
      <ul>
        <li>
          <a href="#" id="top">Documents</a>
          <ul>
            <li>
              <a href="#" id="long">Folder with long name to trigger a horizontal scrollbar</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <script type="text/javascript">
    $.jstree._themes = "/javascripts/jstree/themes/";
    $('#folder-tree').jstree({
        core: { initially_open: [ '#top', '#long' ] },
        plugins: [ 'themes', 'html_data', 'ui', 'crrm' ]
    });
  </script>
</body>
</html>

from jstree.

khanderson avatar khanderson commented on July 21, 2024

Just tried that example with a fresh dist/jstree.js (d32013), I can confirm the problem is still there.

Thanks, jstree is great by the way!

from jstree.

khanderson avatar khanderson commented on July 21, 2024

Okay, got it - the problem is with IE9 and it's solved here:

http://stackoverflow.com/questions/5788726/add-remove-css-will-cause-ie9-to-increase-the-tables-height

Basically adding an 'auto' to any margin on #folder-tree-container magically makes the bug disappear, eg:

#folder-tree-container {
  margin: auto 0 0;
}

from jstree.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.