Issue
How to center jsTree on template properly? I tried to use just <center>, but I got something like this
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>
Answered By - Stephen S
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.