CODEWITHSUNDEEP
css
Chester
Chester

Reputation: 113

CSS Organization Chart

I found a basic organization chart online and I adapted some of my own to include an avatar bubble. I have two problems I can't figure out right now. Any help would be very appreciated.

Here is my code

* {
  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;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 15px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}


/*Remove left-right connectors from elements without any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and right connector from last child*/

ul.first li.first::before,
ul.first li.first::after {
  border: 0 none;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 15px;
}

.tree li .box {
  border: 1px solid #ccc;
  padding: 5px 10px 5px 0px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}


/*Hover effects*/

.tree li .box:hover,
.tree li .box:hover+ul li .box {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li .box:hover+ul li::after,
.tree li .box:hover+ul li::before,
.tree li .box:hover+ul::before,
.tree li .box:hover+ul ul::before,
.avatar {
  border-color: #94a0b4;
}


/*Avatar bubbles*/

.avatar {
  position: relative;
  top: 0px;
  left: -35px;
  width: 75px;
  height: 75px;
  margin-right: -30px;
  background-size: cover;
  background-color: #fff;
  background-image: url("temp.jpg");
  float: left;
  border: .5px solid #94a0b4;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
<div class="tree">
  <ul class="first">
    <li class="first techops"><span class="box"><div class="avatar"></div>Department Area Name<br><strong>Director</strong><br><br>John Smith</span>
      <ul>
        <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span>
              <ul>
                <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li>
              </ul>
            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span>

            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span>
              <li><span class="box"><div class="avatar"></div>Team Leader</span></li>
            </li>
          </ul>
        </li>
        <li><span class="box"><div class="avatar"></div>Manager 2</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Name 3</span></li>
            <li><span class="box"><div class="avatar"></div>Name 4</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

The first issue is that the lines break down to when they don't fit on the page, so it looks weird, as you can see here the "Manager 2" should be in the same line as "Manager Jane Smith" but it's breaking down

enter image description here

Ideally, I would rather have it extend the right pane over as much as needed. If there 20-30 children in one line, then the overflow should be able to scroll to the right as much as needed. The problem I keep coming across is the position:relative (I think), otherwise it wouldn't line up properly.

The second issue I can't seem to figure out is how to make the text stop word-wrapping after the <br/>. The example is in the "Next Title, Next Name" one. As you can see, it drops the "Name" right after the "Next". Ideally, I would like it to be all in one line. I'm pretty sure it's the <br/> that's causing it. If you look at the first one, the "Department Area Name" is before the <br/> and it's not doing it there.

Again, thank you in advance for any insight you may have.

Upvotes: 0

Views: 2014

Answers (1)

Pete
Pete

Reputation: 58432

If you don't use floats and instead change the li to display:inline-block;, you can then make sure that the li do not wrap by adding white-space:nowrap to the ul.

You then need to add white-space:normal to the li so the text inside can wrap and then add vertical-align:top to it so that if one tree has more children, then they will align properly next to each other:

* {
  margin: 0;
  padding: 0;
}

.tree {
  text-align: center;
  padding-left: 10px;
}

.tree ul {
  display: block;
  white-space: nowrap;
  padding-top: 15px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  vertical-align:top;
  display: inline-block;
  white-space: normal;
  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;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 15px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}


/*Remove left-right connectors from elements without any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and right connector from last child*/

ul.first li.first::before,
ul.first li.first::after {
  border: 0 none;
}

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 15px;
}

.tree li .box {
  border: 1px solid #ccc;
  padding: 5px 10px 5px 0px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 12px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}


/*Hover effects*/

.tree li .box:hover,
.tree li .box:hover+ul li .box {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li .box:hover+ul li::after,
.tree li .box:hover+ul li::before,
.tree li .box:hover+ul::before,
.tree li .box:hover+ul ul::before,
.avatar {
  border-color: #94a0b4;
}


/*Avatar bubbles*/

.avatar {
  position: relative;
  top: 0px;
  left: -35px;
  width: 75px;
  height: 75px;
  margin-right: -30px;
  background-size: cover;
  background-color: #fff;
  background-image: url("temp.jpg");
  float: left;
  border: .5px solid #94a0b4;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
<div class="tree">
  <ul class="first">
    <li class="first techops">
      <span class="box">
        <div class="avatar"></div>
        Department Area Name<br>
        <strong>Director</strong><br><br>John Smith
        </span>
      <ul>
        <li><span class="box"><div class="avatar"></div>Manager<br/>Jane Smith</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>John Doe</span>
              <ul>
                <li><span class="box"><div class="avatar"></div>Next Title<br/>Next Name</span></li>
              </ul>
            </li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jane Doe</span></li>
            <li><span class="box"><div class="avatar"></div>Team Leader<br/>Jeff Doe</span></li>
            <li><span class="box"><div class="avatar"></div>Team Leader</span></li>
          </ul>
        </li>

        <li><span class="box"><div class="avatar"></div>Manager 2</span>
          <ul>
            <li><span class="box"><div class="avatar"></div>Name 3</span></li>
            <li><span class="box"><div class="avatar"></div>Name 4</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions