Recently, I came across a family treeview design like the one showcased here. However, the layout seems to fall apart when there are numerous children and doesn't fit on the screen properly. Is there a way to implement a horizontal scrollbar to address this issue? Your assistance is greatly appreciated. Below is the CSS code:
/*CSS Styling*/
* {margin: 0; padding: 0;}
.tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.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;
}
... (CSS Code continues)
/*That's everything from my side. Hope you found it helpful.
Thank you :)*/
Furthermore, here is the HTML structure used for such webpages. The branches expand quite significantly.
<div class="tree">
<ul>
... (Nested list elements continue)
</ul>
</div>
I tried adding
<div class="tree" style ="overflow-x:scroll">