There is a solution for building a tree using HTML + CSS. A little more JS is used to implement the function of folding tree nodes.

Here is the actual example.

The problem is that with a large number of nodes, the latter do not fit in the parent container. Can you suggest any ideas for fixing this problem? That just did not try: and worked with the overflow property and javascript enabled - to no avail.

I will be glad both to the ready decision, and to its verbal description. Thank you in advance.

PS: Original - CSS3 Family Tree

  • one
    Maybe we should open only 1 of the branches, and others fold? Ie: you open the 1st one, you look, you open the second one - the 1st one collapses, you open the 5th one - the 2nd one collapses, etc. One is active (uncovered), and the others are collapsed - HA3IK
  • Thank you, I will definitely apply this solution. It solves the problem, but only partially. After all, there are nodes that do not fit in the container even if the rest (not the parent ones) are collapsed, as shown in the screenshot. - uzumaxy

1 answer 1

There is one thought. To make

ul { white-space: nowrap; } li { display: inline-block!important; }

But then it will be necessary to css firmly edit, so that the desired view with all the lines remains