I've been working on constructing a family tree, and the last part of the functionality is proving to be quite challenging for me.
My family tree consists of list elements that are all floated to the left.
Currently, when the tree expands beyond the screen size, it wraps itself making it difficult to read. What I would like is for the parent div #c1 to enable horizontal scrolling to navigate through the entire tree.
To address this issue temporarily, I added a div inside #c1 called #c2 with a width of 100000px. This prevents the wrapping issue by allowing users to scroll across the tree horizontally.
I am looking for a way to dynamically adjust the width of #c2 to fit the tree upon loading using JavaScript or find a CSS solution for this problem.
I have experimented with various solutions such as white-space: nowrap, but none seem to work effectively in my case.
* {margin: 0; padding: 0;}
.scrollbtn {
float: right;
cursor: pointer;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
color: #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.scrollbtn:hover {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
#c1 {
width: 96%;
overflow: auto;
padding: 2%;
}
#c2 {
width: 100000px;
}
.tree ul {
padding-top: 20px; position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
/* Additional CSS code goes here */
<html>
<head>
<link rel="stylesheet" type="text/css" href="tree.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="c1">
<div id="c2">
<div class="tree" id="tree"><ul>/* Tree data */</div></div></div>
</body>
</html>