Unable to fit content to div in a CSS and HTML treeview

Question

I put together a treeview control with HTML and CSS, that can display the nodes as an Org chart or a classic treeview list.

In the CodePen, each node has a set width: 100px.

How can I fit the content of the div (using display: inline-block for example), but keep the layout of the chart as it is?

The layout of the tree as you see it is exactly as I want it, apart from the set width. When I tried to replace width: 100px with display: inline-block, the layout changes completely and whatever I tried only made it worse.

As for the layout:

org-view: If a node is directly within a red rectangle box, is children should be displayed horizontally (eg: A, F, M and N are horizontally displayed under Root Node). The parent node is centered in the middle of its first and last child (Root Node is centered in the middle of A and N)
list-view: If a node is directly within a green rectangle box, its children will appear below, vertically.

HTML:

<head>
    <meta charset="UTF-8" />
    <title>Hierarchy Chart</title>
</head>
<link rel="stylesheet" href="hierarchy-chart.css">
<body>

    <div class="wbs">

        <ol class="org-view">
            <li>

                <div class="node" for="node-1">1. Root node</div>
                <input type="checkbox" checked id="node-1" />

                <ol class="list-view">
                    <li>

                        <div class="node" for="node-1-1">AAAA</div>
                        <input type="checkbox" checked id="node-1-1" />

                        <ol class="list-view">
                            <li>
                                <div class="node">BBBB</div>
                            </li>
                        </ol>

                        <ol class="org-view">
                            <li>

                                <div class="node" for="node-1-1-2">CCCC</div>
                                <input type="checkbox" checked id="node-1-1-2" />

                                <ol class="list-view">
                                    <li>
                                        <div class="node">DDDD</div>
                                    </li>
                                </ol>

                                <ol class="list-view">
                                    <li>
                                        <div class="node">EEEE</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>

                <ol class="org-view">
                    <li>

                        <div class="node" for="node-1-2">FFFF</div>
                        <input type="checkbox" checked id="node-1-2" />

                        <ol class="list-view">
                            <li>

                                <div class="node" for="node-1-2-1">GGGG</div>
                                <input type="checkbox" checked id="node-1-2-1" />

                                <ol>
                                    <li>
                                        <div class="node">HHHH</div>
                                    </li>
                                    <li>
                                        <div class="node">IIII</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>

                        <ol class="list-view">
                            <li>

                                <div class="node" for="node-1-2-2">JJJJ</div>
                                <input type="checkbox" checked id="node-1-2-2" />

                                <ol>
                                    <li>
                                        <div class="node">KKKK</div>
                                    </li>
                                    <li>
                                        <div class="node">LLLL</div>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>

                <ol class="list-view">
                    <li>
                        <div class="node">MMMM</div>
                    </li>
                </ol>

                <ol class="list-view">
                    <li>
                        <div class="node">NNNN</div>
                    </li>
                </ol>
            </li>
        </ol>

    </div>
</body>

</html>

CSS

body {background-color: white;}
.wbs {
  display: grid;
  border: 4px solid #eee;
  position: relative;
}
.wbs ol {
  list-style-type: none;
  padding-left: 10px;
}  

.org-view {
  border: 1px dashed red;     
  margin: auto;
 }
.org-view >li > .node:first-child {
  margin-left: auto;
  margin-right: auto;
}

.list-view {
  border: 1px dashed lightgreen;
  vertical-align: top;
}


/* Tree view collapsible functionalities */
.wbs input {
  //display: none;
}
.wbs input ~ ol {
  display: none;
}
.org-view >li > .node:first-child {
  margin-left: auto;
  margin-right: auto;
}


.org-view > li > input:checked ~ ol {
  display: inline-block;
}

.org-view .list-view input:checked ~ ol {
  display: block;
}

.org-view .org-view input:checked ~ ol {
  display: inline-block;
}

.node {
  margin-top: 10px;
}


.node {
  color: blue;
  position: relative;
  background-color: white;
  border-radius: 3px;
  border: 2px solid #4285F4;
  //display: inline-block;
  width: 100px;
  padding: 4px;
  vertical-align: top;
}

Narxx Narxx · Accepted Answer · 2018-01-20T02:05:24

To me it seems fine.

If you want the nodes to cause a line break, you could wrap them within a <div> element, so they would have a block element breaking the lines.

Also, you might wanna center them.

Here's a fork of your CodePen: https://codepen.io/anon/pen/jYdEro?editors=1100#

Had only the first nodes. I'm too lazy to actually do the entire thing - but you'll get the point :)

Some explanation:

Added a new wrapper element for each node element named node-wrapper. The default display for <div> elements is block so that takes care of the line breaks. The styles for that element:

.node-wrapper {
  text-align: center;
}

Since the node element is inline-block, we can center it by using text-align on the parent element.

Unable to fit content to div in a CSS and HTML treeview

1 Answers