I stumbled upon a simple organization chart online and decided to customize it by adding an avatar bubble. However, I am currently facing two issues that I am unable to resolve on my own. Any assistance or guidance would be greatly appreciated.
Below is the code snippet:
* {
margin: 0;
padding: 0;
}
.tree {
text-align: center;
padding-left: 10px;
}
.tree ul {
padding-top: 15px;
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: 15px 0px 0px 60px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/* More CSS code... */
The first issue I am facing is that the lines break when they do not fit on the page, resulting in a visually odd layout. For example, the "Manager 2" should be on the same line as "Manager Jane Smith," but it breaks down.
https://i.sstatic.net/p9lAA.png
Ideally, I would like the chart to extend the right pane as needed. If there are 20-30 children in one line, the overflow should be able to scroll to the right. However, I keep encountering issues with the positioning, which affects the alignment.
The second issue I am struggling with is preventing text from wrapping after the <br/> tag. This can be seen in the "Next Title, Next Name" section, where the text wraps incorrectly. I suspect the <br/> tag is causing this. In contrast, the "Department Area Name" text is not wrapping after the <br/> tag.
Thank you in advance for any help or suggestions you can provide.