Search code examples
javascripthtmljqueryjstree

Jstree - How to properly place on template

How to center jsTree on template properly? I tried to use just <center>, but I got something like this enter image description here

As the image shows it's difficult to see which node is child/parent. I like how it's made on https://www.jstree.com/ (squares on the right).

Template code (I don't think if it's needed):

<html>

<head>
    <title>XLS</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
</head>

<body onload="PathInit()">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <br><br><br><br>
    <center>
        <br><b>Select a directory.<br></b></center><br><br>
    <script>
        function PathInit() {
            $.get("/xls/path/", {
                path: ""
            });
        }

    </script>
    <center>
        <div id="container" name="container">
            //Way to many
            <ul>'s and
                <li>'s
        </div>
        <script>
            function myf(a) {
                return a.instance.get_selected(true)[0].text;
            }
            var tree = $('#container')
                .jstree();
            $('#container')
                .on("changed.jstree", function(e, data) {
                    var elo = window.myf(data);
                    console.log(elo);
                    $.get("/xls/path/", {
                        path: elo
                    });
                });

        </script>


        <center><br>
            <form method="post">

                <br><br><b>Select source language:
                    <br>
                    <select name="source" id="source" option selected>
                        {% for o in data %}
                        <option value="{{o.name}}">{{o.full}}</option>

                        {% endfor %}
                    </select>

                    <br>
                    <br>Select destionation languages:<br></b>
                (hold ctrl to add more items)<br>
                <select multiple name="args[]" id="args" size="10">
                    {% for o in data %}
                    <option value="{{o.name}}">{{o.full}}</option>
                    {% endfor %}
                </select>

                <br><br><br>


                <input type="submit" value="Send"><br><br></form>
            <a href="/index/">Back</a>
        </center>
</body>

</html>
Solution

  • The alignment issues are due to the html center tag which doesn't work well with jsTree's CSS styles. One way to do it is to remove the tree Div from the center tag and align it with some custom CSS.

    <div id="container" name="container" style="margin-left: auto; margin-right: auto; display: table">
        //Way to many <ul>'s and <li>'s
</div>