8
I need to correctly center this binary tree model.
jQuery or JavaScript can be used.
I’ll need to generate the code with PHP, then you have to have a certain logic in html.
Another detail is that you need to have one overflow-x automatic, allowing the window to adapt as the tree grows.
I am trying to make it as compact as possible to display many results. I created this code:
$(function () {
$('.node').each(function () {
var vm = $(this);
lftwid = vm.children(".lft").width();
rgtwid = vm.children(".rgt").width();
if (lftwid != rgtwid) {
if (lftwid > rgtwid) {
vm.children(".rgt").width(lftwid);
} else {
vm.children(".lft").width(rgtwid);
}
}
});
});.container {
overflow-x: auto;
}
.root {
position: absolute !important;
margin:0;
padding:0;
display:block;
text-align:center;
font-size: 10px;
background-color: #ddd;
}
.node {
width: auto;
height:auto;
}
.lft, .rgt {
margin:5px;
margin-top: 10px;
min-width:40px;
min-height:40px;
}
.rgt {
border:1px solid #000;
float:right;
background-color: #ccc;
}
.lft {
border:1px solid #fff;
float:left;
background-color: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>
<div class='container'>
<div class='row'>
<div class='root node'>
<p><i class="fa fa-user"></i>
</p>
<p>root name</p>
<p>150</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>100</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>200</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>150</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>0</p>
</div>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>100</p>
<div class='node'>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>50</p>
<div class='lft'>
<p><i class="fa fa-user"></i>
</p>
<p>lft name</p>
<p>150</p>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>200</p>
</div>
</div>
<div class='rgt'>
<p><i class="fa fa-user"></i>
</p>
<p>rgt name</p>
<p>50</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Marcelo, I edited the question and brought the Jsfiddle code to Sopt to avoid compromising your question if the service goes offline. (you can reverse when you want).
– Renan Gomes
I don’t understand what the question is. I’ve been here for a while trying.
– MoshMage
Marcelo, your question acts more like a template for copying code than you ask yourself. What exactly do you want to ask when you say 'center'? I wonder why it seems to me that it is already completely centralized (visually).
– José
It is not centered with respect to all lines. The top one is right or left when you have many elements on one side of the tree.
– Marcelo Aymone
@Marceloaymone I think I got it. The picture on the right doesn’t line up with the one on the left if there are too many elements, right? But this is a consequence of the fact that there is a minimum size for each frame due to the text and border (ie content), and also a maximum size for the container (in the bootstrap code there is limit) and the computer screen. You must make a horizontal scroll appear and/or not limit the container (size). Otherwise, the right frame will descend on the y-axis at some point. If that’s right, I can edit your question to try to explain it to the people - or you can edit it yourself.
– José