A pure HTML/ CSS responsive organization chart with departments and sub-sections
First off, love the org chart. Second it breaks in IE 7/8. Do you happen to have a fix? Unfortunately our users are still using IE 7/8. Thanks!
This was originally a POC (proof of concept) I made for a project I worked on (intranet). We had to support IE9 and later, so supporting legacy IE was not really an issue. Unfortunately I don't have a fix for this. Personally, I'd skip the responsive experience for IE7/IE8 in total and just serve a page with static width. These browsers don't support media queries anyway, and are usually used on PCs with higher screen widths.
But since the chart uses pseudo-elements (:before/:after), you might consider using selectivizr.js to make these browsers a bit smarter.
That's one awesome chart!
thanks, very helpful.
But department E is not connected on the mobile size.
@dennisjohnsen Thx for the heads up :-) It's fixed now. Pardon my brainfart. I think the code could need a minor refactoring.
Featured here: http://fribly.com/2014/11/10/pure-css3-responsive-organization-chart/
Tnx for your codepen.
i used it and improved some part of it: http://codepen.io/AldoFerrari/pen/raayXJ?editors=110
@AldoFerrari Your variant looks great!
This looks great!
What about adding and removing elements? Say I wanted to add another block under Director, or remove one..is it easy?
I really like the color screen and hover effect! Thank you!
@tempneff This demo was just a proof of concept i did for a particular project a couple of years ago. It's been a while since I fiddled with it, so I'm not really sure how extendable it is. Originally, the top-levels was pretty fixed, but the bottom-level (departments) was the one that could potentially change. The idea was, that the chart would be mapped to a page-structure in the CMS at the time. That's why it consists of a nested list-structure. If you need to change the look or structure, I suggest you fork the code and fiddle around. I don't have much time improving the code at the moment. By the way - have a look at the fork by @AldoFerrari http://codepen.io/AldoFerrari/pen/raayXJ?editors=110 . He has done some good improvements that might lead you on your way.
I am new to this gig and just signed up for one main purpose really :) - I need to make a chart that looks something like this image I've linked to this comment. I started fiddling with your html and that of the Aldo html but I am making a real mess of things. Do you have any advice?
@yootilize Hi and thank you for your comment. My first thought regarding the orgchart you linked to, is that it looks a bit tough. Not that it's necessarily hard to create with HTML and CSS, but more that the actual structure is difficult to grasp. At least I find it a bit hard to read and understand :-). The hierarcical structure is not that clear to me. My initial question is; Could it be simplified and made more understandable?
For example: What's the dotted vertical line representing? Could it be replaced with a "box" with the header GOVERNANCE MANAGEMENT surrounding three list with their own subheaders ELDERS, SENIOR PASTOR and MANAGEMENT TEAM?
What about the underlined text "Comprises of" under the lists for ELDERS and MANAGEMENT TEAM. Are these headers for nested lists? Should these nested lists be indented for clarity?
Is the CHURCH LEADERSHIP "above" the WIDER LEADERSHIP GROUP or are these divisions equal? They're side by side, but the arrow connecting the box MANAGEMENT TEAM to STAFF LEADERS makes it look like the first division is hierarcical placed above the second.
I don't know the requirements for your particular project, but I would typically ask myself (or the client):
These questions could start a necessary process of simplifyling and making it more suited for a HTML/ CSS version.
Since I do not know your level of knowledge in HTML/CSS, it's difficult to give you direct tips on how to start coding your example.
Totally get what you're saying. I have contacted the folk that put it together and passed on your comments. Super helpful. Thank you.
Really Good work..
@Thiru thanks! Glad you like it :-)
This is awesome, great work. I want to tweak it to go straight from the director to the departments. Any change I make breaks it... any ideas on how to accomplish that?
oohh maan, @siiron , you save my day :D I was searching for this and came up with your pen. For the IE 8 and below maybe we can use some polyfil like selectivizr & respond.js.
Triple heart for your pen :D
@ariona Glad you like it :-)
I haven't tried it with selectivizr.js or respond.js. Luckily it only had to work in IE9+ when I made this proof of concept. If you feel like trying to go for IE8 support, I'd be happy to hear about your findings. My chart is kinda rigid, and people often find it hard to adapt to their particular structure. But some have managed it. Have a look at http://codepen.io/AldoFerrari/pen/raayXJ?editors=110 for another take on this issue. Good luck!
Hello. Excelent job. I want to add another department, How can i do it? (im a new on html)
@nekive Thanks! It's been a while since I made this now, but adding a new department should be pretty straight forward. It's a matter of duplicating one of the nodes with the class .department. This is nested list structure. After adding this new department, and subsections in the HTML, you then have to modify the css for the width of .department. This is a value in %, so it should be the total width of the chart, divided on the number of departments. Remember to take the margins into account (space between boxes).
A quick estimate could be to set:
Also adjust the connecting line on top of the departments with roughly these values:
@siiron Thanks!!. Works like a charm. Thanks for the guide. :)
Greetings Ronny! Great work on this Org Chart. Do you have a Print CSS for this chart that facilitates the Printing of this chart with the css intact (boxes, connecting lines etc.). I've used your approach to generate an org chart, but need a way to have users click a "Print to PDF" button which keeps everything intact. Any direction or help would be greatly appreciated! Blessings, Lonman0921
Hi @Lonman0921! Thank you :-) This pen was a prototype I did for a project ages ago, and printing the chart was not part of my scope that time. But it's a valid use case! I've updated the css with styling for basic printing. The concept is to change every media query targeting 'all' and change them to 'screen'. This way the responsive behaviour (mobile view) does not impact printing. We preserve the desktop layout on print sort of. In addition, I added som print only media queries to invert the color of the borders and lines. IT's just a quick fix, but seems to work ok.
If I've made this prototype in 2018, I probably would have tried to build this chart using CSS Grid. Good luck!
Hi Ronny, first of all thank you for your amazing work. I'm looking to do an add and remove button in js but i struggle a lot to make something beautifull.. Do you have any tips for me ? (To be honest i'm kind of a beginner in web dev)
Need to know how to enable it? Go here.