I am working on a MLM Project & have a binary tree which is being generated from my database. The tree legs appear well at the top but scatter at the bottom. At the top, the left leg is showing on the left and the right leg on the right, which is ok. But at the bottom, the left leg is showing at the top of the right leg. I think the problem is with my css.
<style type="text/css">
* {margin: 0; padding: 0;}
.tree li a:hover, .tree li a:hover+ul li a
{
margin-right:100px
}
.leftnode > ul > li > a
{
background-color:whitesmoke;
}
.rightnode > ul > li > a
{
background-color:orange;
}
.tree ul {
padding-top: 20px; position: relative;f
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
li.child
{
width:50%
}
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.child
{
/* width:30%;
min-width:500px; */
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
</style>```
Please help. Thanks a million
the tree was generated from mysql database table using php. @m_hutley or is there a way i can make the width expand to take the width? even if it will be in an iframe or whatever where i can scroll left and right to see the expanded tree?
Just the length of that code block makes me think ‘too much data, too little space’, followed quickly by ‘draw it on an SVG and use a zoomable viewport’.
It’s going to be completely unreadable on a phone.
Ok, looking at your code and forcing a width of 6000px and removing your 50% widths in a couple of places I can get the tree to display.
The problem is that the width required will be determined by the number of entries at its widest point. If there is no width applied then the tree wraps in the wrong place due to the way its constructed.
I guess you may have to dynamically calculate the width of that tree and apply it to the parent. I will see if there is a css way to allow the menu to grow without wrapping but I’m guessing not due to the way that floats are utilised in its construction
If we use a flex layout instead on the tree then that will nullify all the floats and also allow the element to stretch without requiring a fixed width (flex does not wrap unless you tell it to).
Here’s a new pen with that code added.
Of course as already mentioned there may be considerable work involved in allowing smaller screens to see this easily.
Guys, thank you very much. Am so happy. You really fix the problem.
One more thing please. Is there a way I can centralise the tree insteal of it aligning left to the screen. What I mean is that once the page loads, the top member (greatest2020) is at the center of my screen, then i can now scroll left or right to view whichever side am interested in?
You would need js for that once the element is larger than the viewport and adjust the scroll bar to the center position. You could drag the element to the left in css but then you couldn’t scroll to see the left side.
This is really a question for @m_hutley but something like this might work.
(function () {
var bodyEl = document.querySelector("body").offsetWidth;
var el = document.querySelector(".tree > ul").scrollWidth;
document.documentElement.scrollLeft = document.body.scrollLeft =
(el - bodyEl) / 2;
})();
