designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. Below is the code snippet I am currently working with:

* {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; position: relative;
    transition: all 0.5s;
}
.tree ul ul ul::before {
    content: '';
    position: absolute; left: 50%; bottom: -20px;
    border-left: 1px solid #ccc;
    height: 20px;
}

... (Code continuation)


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
... (Script references omitted for brevity) ...       
        
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            ... (Structure of child and grandchild nodes)
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Desired Layout: I aim to create an organization chart where the parent node connects to a child node and has three horizontal grandchild nodes. The middle grandchild should be vertically connected to the child. Please refer to this https://i.stack.imgur.com/VQbXB.pnghttps://i.stack.imgur.com/deMxf.png image for clarity.

Challenge: Despite several attempts to tweak the existing code, I struggle with properly aligning the grandchild nodes as intended in the layout description.

Question: Seeking guidance on how to modify the code effectively to achieve the desired organizational chart layout. Specifically, I need help connecting the three grandchild nodes horizontally while ensuring the vertical connection between the middle grandchild and child nodes.

Your insights and assistance are highly appreciated. Thank you!

htmlcssbootstrap-4responsive-design

Answer №1

Here is a solution that enhances the responsiveness of chart versions:

* {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; 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: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Using ::before and ::after for connectors*/

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

/*Removing left-right connectors from elements without siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Making the top space zero for single children*/
.tree li:only-child{ padding-top: 0;}


/*Adding downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    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;
}

/*Hover effects*/
/*Applying hover effect to element's lineage as well*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

.tree ul ul ul ul li a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border: 1px solid #ccc;
    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;
    text-orientation: mixed !important;
    white-space: nowrap; /* Prevent text from wrapping */
    
    writing-mode: vertical-rl; /* Vertical orientation */
}



.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}
.tree ul ul ul::before {
    content: '';
    position: absolute; left: 50%; bottom: -20px;
    border-left: 1px solid #ccc;
    height: 20px;
}
/*Remove left connector from first child and 
  right con...

@media (max-width: 600px) {
    .tree ul ul ul ul li a {
        writing-mode: horizontal-tb;
    }

    .tree ul ul ul {
        padding-top : 0;
    }

    .tree > ul > li > ul > li > ul > li {
        padding: 0 0 0 20px;
        display: flex;
        align-items: center;
        clear: left;
        position: relative;
        left: 50%;
    }
    .tree > ul > li > ul > li > ul > li::before {
        ...

    .tree > ul > li > ul > li > ul > li:last-child::before {
        ...

    .tree > ul > li > ul > li > ul > li > a {
        writing-mode: vertical-rl;
    }


    .tree ul ul ul li::before {
        ...
    }
    .tree ul ul ul li:last-child::before {
        ...
    }
    .tree ul ul ul li::after {
        ...
    }

    .tree ul ul ul ul {
        ...
    }

    .tree ul ul ul ul::before {
        ...
    }

    .tree ul ul ul ul li {
        ...
    }

    .tree ul ul ul ul li:first-child::before,
    .tree ul ul ul li:last-child::after {
        ...
    }
}
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer №2

Give this CSS a shot:

* {margin: 0; padding: 0;}

.tree ul {
    padding-top: 20px; 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: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Utilizing ::before and ::after for connectors*/

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

/*Hiding left-right connectors from elements without siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Removing space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Adding downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    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;
}

/*Hover effects*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

/*Styles for nested items*/
.tree ul ul ul ul li a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    border: 1px solid #ccc;
    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;
    text-orientation: mixed !important;
    white-space: nowrap; 
}



.tree ul ul ul {
    padding-top : 0;
}

.tree > ul > li > ul > li > ul > li {
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    clear: left;
    position: relative;
    left: 50%;
}
.tree > ul > li > ul > li > ul > li::before {
    height: 100%;
}
.tree > ul > li > ul > li > ul > li:last-child::before {
    height: 50%;
}

.tree > ul > li > ul > li > ul > li > a {
    writing-mode: vertical-rl;
}


.tree ul ul ul li::before {
    width: 20px;
    left: 0;
    border-left: 1px solid #ccc;
    border-top: none;
}
.tree ul ul ul li:last-child::before {
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
}
.tree ul ul ul li::after {
    width: 20px;
    top: 50%;
    left: 0;
    border-left: 1px solid #ccc;
}

.tree ul ul ul ul {
    display: inline-block;
    padding: 0 0 0 20px;
}

.tree ul ul ul ul::before {
    border-left: none;
    border-top: 1px solid #ccc;
    width: 20px;
    left: 0;
    top: 50%;
}

.tree ul ul ul ul li {
    float: none;
    padding: 5px 0 5px 20px;
}

.tree ul ul ul ul li:first-child::before,
.tree ul ul ul li:last-child::after {
    border: 0 none;
}
.tree ul ul ul ul li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li><a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch the checkbox attribute for multiple items within a carousel using Angular 2/Typescript

I am currently working on a carousel feature where each item has a checkbox above it. My goal is to be able to click on an item and have its corresponding checkbox checked. The current code successfully achieves this, but the issue I'm facing is that ...

htmlangulartypescript

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

What is the reason for the misalignment of glyphicon-warning-sign form-control-feedback vertically in the code below after applying font-size: 20px; to the label? <div class="container"> <div class="content align-left contact"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Designing the KendoUI combo box with a touch of style

Is there a way to customize the style of required and invalid fields for KendoUI elements, such as changing the background color of a required input field? I have been using the following styles: .k-textbox>input[required], .k-picker-wrap .k-input[re ...

cssvalidationstyleskendo-uikendo-combobox

Updating part of a page while also changing the navigation

Apologies in advance, as this is my first attempt at coding a website. I have a specific need where I want to update only one div on my web page when a link in the navigation bar is clicked. <body> <div id="wrapper"> <header id= ...

javascriptjqueryhtmlajax

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules

The jQuery AJAX variable was successfully sent via a POST request, but unfortunately, I am unable to access it in PHP

Objective: The goal is to trigger a jQuery AJAX request when clicking on a table cell (td). This request will send the corresponding reservationid via a POST method to the same page containing the clicked td. In the PHP file, a query will be executed to f ...

phpjqueryajaxbootstrap-4

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

asp.netcss

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

javascripthtmlcss

Display the element following a specific component while looping through an array in Vue.js

Currently, I am facing an issue while using a for-loop on the component element. My goal is to display a <p> element next to the <component> element during the loop's third iteration. The challenge lies in accessing the iteration variable ...

javascripthtmlvue.js

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

Is the username you want available?

I am facing a challenge in my registration form validation process where I need to verify the username input using javascript and flask in python, but the implementation is unclear to me. The requirement is to utilize $.get in the javascript segment along ...

javascriptpythonjqueryhtmlcs50

Having trouble with adding a listener or making @click work in VueJS?

Apologies for my limited experience with Vue. I am currently facing an issue where one of my click functions is not working as expected for multiple elements. The click event is properly triggered for the #app-icon element. However, the function is not be ...

javascripthtmlvue.js

Is there a way to successfully implement this CSS animation utilizing background images in a Markdown document?

I am attempting to create a dynamic animation on a <canvas> element by changing the background image using the @keyframes rule in CSS. Unfortunately, I am facing difficulty getting the animation to work. The <canvas> tag does not even display a ...

htmlimagecanvasmarkdowncss-animations

I am attempting to retrieve the information entered into the textbox, search for it within my database, and display the results beneath the textbox for reference

<!----- fetchCedulaData.php This script retrieves data from the database and performs a search to return results ---------------------------- - --> <?php require("connection.php"); $cedula=$_REQUEST["cedula"]; //$cedula="0922615646"; echo $cedu ...

javascriptphphtmlajax

Tips for adjusting the color of boxes within a grid

I've built a grid containing multiple boxes, each identified with an id of box + i. However, I'm encountering difficulties when attempting to implement an on-click function to change the color of each box. Below is the code snippet in question: f ...

javascripthtmlreactjsonclickgrid

Is it possible to disregard text formatting in Python when using Selenium?

I am experiencing an issue when trying to compare a name from my name string to a name in a webelement. For instance: Name format in my namestring (scraped from a website): Mcburnie Name in webelement: McBurnie The Xpath matching fails because the webe ...

pythonhtmlselenium

Stepper wizard experiences a variation in CSS styling when minified

Two plunkers showcasing material design wizard selectors are causing different behavior upon stepper clicks. One uses a minified version of CSS while the other is expanded. The issue arises with the transition effects in the .step-wizard .progressbar class ...

javascriptjqueryhtmlcss

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

The HTML image tag is malfunctioning on a Windows system

I'm currently updating an HTML page and trying to add an image using the img tag. <img src="file:///C:/wamp/www/images/Sat.png" class="img-circle" alt="User Image"/> However, it doesn't seem to be working! ...

html