CODEWITHSUNDEEP
javascriptcssresponsive-designtreetreeview
dieTrying
dieTrying

Reputation: 377

Responsive HTML/CSS tree view

I want to build responsive tree diagram - basic example: https://jsfiddle.net/ppnfpggx/2/

But with the responsive layout I have some problems. For example, on small device it should looks like this:enter image description here

Above line of each item:

.tree-item::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -20px;
  height: 4px;
  background-color: #000;
  width: 88px; // (48 + 20 + 20 -> half-margin on both sides)
}

The items count may be dynamic, so I tried playing with :last-child to remove ::before, but have problems with item before last. What I really need when items count more than three, the 3rd item should closing the tree, remove from remaining items pseudo-elements and somehow center last two items without margin-left.

Can I achieve this responsive view by CSS/JS, if yes, please provide any idea or basic example.

Upvotes: 2

Views: 3379

Answers (1)

PederBG
PederBG

Reputation: 138

I don't know if this is what you want, but flexing is often a good way to make responsive design with only css.

#tree{
    display: flex;
    justify-content: space-around;
}

//Edit Try to put this block of code in to your css. Not working perfectly, but solves the initial problem.

@media (max-width: 340px) {
    .tree-item:nth-child(n+4)::before {
        display: none;
        }
    .tree-item:nth-child(n+4)::after {
    display: none;
    }
    .tree-item:nth-child(3)::after {
      left: auto;
      right: 50%;
    }
}

Upvotes: 2

Related Questions