CODEWITHSUNDEEP
htmlcss
qasimmehdi
qasimmehdi

Reputation: 366

Org Chart in html breaking to next line

I made an Org chart structure in html/css I will render a binary tree in the org chart so all nodes will have maximum two childs. But there is some problem with the css which is breaking chart to next line if the chart gets big or the screen is small. I just want some help with the css so that it displays a scrollbar and the tree doesnot break.

.tree ul {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
  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: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

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

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

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

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

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

.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;
}

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

.tree li div {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="tree.css" />
  <title>Document</title>
</head>

<body>
  <div class="tree">
    <ul>
      <li>
        <div>Parent</div>
        <ul>
          <li>
            <div>Child 1</div>
            <ul>
              <li>
                <div>Child-1-1</div>
              </li>
              <li>
                <div>Child-1</div>
                <ul>
                  <li>
                    <div>Child-1-1</div>
                  </li>
                  <li>
                    <div>Child-1-2</div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <div>Child 2</div>
            <ul>
              <li>
                <div>Child-2-1</div>
              </li>
              <li>
                <div>Child-2-2</div>
              </li>
            </ul>
          </li>
        </ul>

      </li>
    </ul>

  </div>
</body>

</html>

enter image description here

Upvotes: 0

Views: 187

Answers (1)

Minal Chauhan
Minal Chauhan

Reputation: 6158

Remove padding-left in .tree ul and add min-width in first ul

.tree {
  width: 100%;
  overflow-x: auto;
  display: block;
  padding-bottom: 30px;
}
.tree > ul {
   min-width: 500px;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  padding-left: 0;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

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

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

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

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

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

.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;
}

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

.tree li div {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="tree.css" />
  <title>Document</title>
</head>

<body>
  <div class="tree">
    <ul>
      <li>
        <div>Parent</div>
        <ul>
          <li>
            <div>Child 1</div>
            <ul>
              <li>
                <div>Child-1-1</div>
              </li>
              <li>
                <div>Child-1</div>
                <ul>
                  <li>
                    <div>Child-1-1</div>
                  </li>
                  <li>
                    <div>Child-1-2</div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <div>Child 2</div>
            <ul>
              <li>
                <div>Child-2-1</div>
              </li>
              <li>
                <div>Child-2-2</div>
              </li>
            </ul>
          </li>
        </ul>

      </li>
    </ul>

  </div>
</body>

</html>

Upvotes: 1

Related Questions