I'm currently working on organizing hierarchical data using HTML, JS, and jQuery. My chosen method involves utilizing a left-floated div container system in place of a grid system for easier recursive code generation. One challenge I've encountered is the need to ensure that the tree structure's width fits perfectly within the client window. To accomplish this, I dynamically adjust the width of each div created in JavaScript by calculating percentages based on sibling count.
However, this approach results in wasted space as even childless elements receive the same width as their siblings. This becomes particularly problematic at deeper levels where space efficiency is crucial.
An alternative approach I've explored is letting the browser auto-size everything, which optimizes space usage but sacrifices dynamic sizing control. The inability to zoom properly and guarantee an initial 100% width poses challenges. Additionally, when the tree exceeds the page width, the overflowed divs shift vertically instead of scrolling horizontally as desired.
Therefore, my question is: what options exist to ensure optimal space utilization, precise width fitting, and dynamic sizing with zoom capability for my tree structure?
For reference, here is a screenshot of the hierarchical data:
And a simplified example of the generated code:
<div id="map" class="tag-container">
<div class="tag">Level 0 data</div>
<div class="tag-container">
<div class="tag">Level 1 data</div>
<div class="tag-container">
<div class="tag">Level 2 data</div>
<div class="tag-container">
<div class="tag">Level 3 data</div>
</div>
<div class="tag-container">
<div class="tag">Level 3 data</div>
<div class="tag-container">
<div class="tag">Level 4 data</div>
</div>
</div>
</div>
<div class="tag-container">
<div class="tag">Level 2 data</div>
<div class="tag-container">
<div class="tag">Level 3 data</div>
</div>
<div class="tag-container">
<div class="tag">Level 3 data</div>
<div class="tag-container">
<div class="tag">Level 4 data</div>
</div>
</div>
</div>
</div>
</div>
Along with the relevant CSS:
.tag-container {
padding: 0px;
float: left;
box-sizing: border-box;
display: inline;
width: 33.333%
}
.zoom {
cursor: pointer
}
body {
background-color: azure;
overflow: scroll
}