Issue
See pic - in this tree an 'Only Child' is not horizontally aligned with other children:
I can see this is caused by CCS which removes space from the top of single children, but removing that CSS shows the vertical line as being too short:
Anyone have a solution of how to make an only child horizontally aligned with other children?
Thanks
.genealogy-body{
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;
text-align: center;
}
.genealogy-tree{
display: inline-block;
}
.genealogy-tree ul {
padding-top: 20px;
position: relative;
padding-left: 0px;
display: flex;
justify-content: center;
}
.genealogy-tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
.genealogy-tree li::before, .genealogy-tree li::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #ccc;
width: 50%;
height: 18px;
}
.genealogy-tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
/*This removes left & right connectors from elements without any siblings*/
*.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
display: none;
}
/*This removes space from the top of single children BUT IT CAUSES MISALIGNMENT SO NEED TO EXTEND LINE SOMEHOW*/
.genealogy-tree li:only-child{
padding-top: 0;
}
/*This removes left connector from first child and right connector from last child*/
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
border: 0 none;
}
/*This adds back the vertical connector to the last nodes*/
.genealogy-tree li:last-child::before{
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.genealogy-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;
}
/*This adds downwards connectors from parents*/
.genealogy-tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
}
.genealogy-tree li a{
text-decoration: none;
color: black;
font-family: "Lora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 11px;
text-align: center;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<body>
<div class="body genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<img src="../images/trees/_tree_blank.jpg" alt="refresh your browser...">
<div class="member-details">
<span><strong>Top<br>Line</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>PARENT<br>WITH<br>ONE CHILD</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>ONLY<br>CHILD</strong><br>* line short *</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>PARENT<br>WITH<br>TWO CHILDS</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>Child 1<br>of 2</strong></span>
</div>
</div>
</div>
</a>
</li>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>Child 2<br>of 2</strong></span>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
Solution
Try the below snippet, these are the changes
- added pseudo-classes for only-child
- removed top padding
- removed pseudo-classes for the first list element
*.genealogy-tree li:last-child:only-child::after, .genealogy-tree li:last-child:only-child::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 18px;
border-radius: 0;
}
.genealogy-tree > ul > li::after, .genealogy-tree > ul > li::before {
display: none
}
.genealogy-tree li:only-child{
/* padding-top: 0; */
}
.genealogy-body{
white-space: nowrap;
overflow-y: hidden;
padding: 50px;
min-height: 500px;
padding-top: 10px;
text-align: center;
}
.genealogy-tree{
display: inline-block;
}
.genealogy-tree ul {
padding-top: 20px;
position: relative;
padding-left: 0px;
display: flex;
justify-content: center;
}
.genealogy-tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
}
.genealogy-tree li::before, .genealogy-tree li::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #ccc;
width: 50%;
height: 18px;
}
.genealogy-tree li::after{
right: auto; left: 50%;
border-left: 2px solid #ccc;
}
*.genealogy-tree li:last-child:only-child::after, .genealogy-tree li:last-child:only-child::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 18px;
border-radius: 0;
}
.genealogy-tree > ul > li::after, .genealogy-tree > ul > li::before {
display: none
}
/*This removes space from the top of single children BUT IT CAUSES MISALIGNMENT SO NEED TO EXTEND LINE SOMEHOW*/
.genealogy-tree li:only-child{
/* padding-top: 0; */
}
/*This removes left connector from first child and right connector from last child*/
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
border: 0 none;
}
/*This adds back the vertical connector to the last nodes*/
.genealogy-tree li:last-child::before{
border-right: 2px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.genealogy-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;
}
/*This adds downwards connectors from parents*/
.genealogy-tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 2px solid #ccc;
width: 0; height: 20px;
}
.genealogy-tree li a{
text-decoration: none;
color: black;
font-family: "Lora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 11px;
text-align: center;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<body>
<div class="body genealogy-body genealogy-scroll">
<div class="genealogy-tree">
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<img src="../images/trees/_tree_blank.jpg" alt="refresh your browser...">
<div class="member-details">
<span><strong>Top<br>Line</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>PARENT<br>WITH<br>ONE CHILD</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>ONLY<br>CHILD</strong><br>* line short *</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>PARENT<br>WITH<br>TWO CHILDS</strong></span>
</div>
</div>
</div>
</a>
<ul>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>Child 1<br>of 2</strong></span>
</div>
</div>
</div>
</a>
</li>
<li>
<a>
<div class="member-view-box">
<div class="member-image">
<div class="member-details">
<span><strong>Child 2<br>of 2</strong></span>
</div>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.