How to display a tree in HTML/CSS? nested left-floating divs and wrapping

Question

In HTML/CSS I want to display a data-tree in the following form: The root node is on the left side. Parent nodes are to the left of child nodes and the first child is always on the same line as the parent. The sibling nodes are on the lines below.

See this example. The lines are just illustrative here to understand the relationships.

1 - 1.1 - 1.1.1
  \     ` 1.1.2
   `1.2 - 1.2.1
2 - 2.1
   `2.2

I want to have the child nodes connected with their parents so that, when I e.g. drag-drop the parents, all the connected child nodes move too. Thats why I chose a nested-approach.

My approach:

<div><p> some text </p><div> recursively add the children here </div></div>

Each node I add like this

$(document.createElement('div'))
    .appendTo(parent)
    .css('overflow', 'auto')
    .append($(document.createElement('p'))
        .css('float', 'left')
        .html(some text)
    .append($(document.createElement('div'))
        .css('overflow', 'auto'));

My problem with the approach: When the tree gets larger than the container it wraps to the next line. However I want the effect of overflow:hidden. This css tag on the container has no effect with left-floating items.

jsFiddle: See this jsFiddle for an example: http://jsfiddle.net/Afasv/8/ The first one is what the tree looks like in a too tight container, the second it has enough space and in the third I am using a hack where I place the tree within a div larger than the outer container.

Any ideas for a solution would be appreciated!

why not use lists for this? also overflow:hidden makes an element enclose a nested floated element. also i dont understand the question. — user1721135
– user1721135, Commented Jan 24, 2013 at 22:26
just rephrased the question and added two examples. Regarding the list, I want to have the first child element on the same level as the parent. — Edmund Moshammer
– Edmund Moshammer, Commented Jan 24, 2013 at 23:27
It's hard to understand your problem. First: If you want to display a nested list structure, then you should use nested lists. And second, displaying the whole thing is set by CSS defaults in your browser. If you want to display the first sub-item on the line of it's parent, just move it up using relative positioning. — feeela
– feeela, Commented Jan 26, 2013 at 22:39

dave · Accepted Answer · 2013-01-26 22:56:58Z

1

+50

As well as the others who commented I am not exactly sure what your problem is. My guess is that you are looking for display: inline-block and white-space: nowrap. That way the list only has linebreaks where you want them to be, regardless of available space.

If you really want overflow: hidden you can still add it to the first-level ol. Although hiding content most of the time isn't in the best interest of the user. (overflow: auto perhaps?)

http://jsfiddle.net/QGkKD/1/

And you really should use lists to mark up lists.

One more thing. If you have a problem with HTML and CSS, there is really no use in showing any Javascript-Code. It just conceals the actual problem

edited Jan 26, 2013 at 22:56

answered Jan 26, 2013 at 22:43

dave

4,1122 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edmund Moshammer Over a year ago

Just tried it in my own source, works like a charm! Thanks a lot! I didn't know about the white-space:nowrap feature. Thanks also for the hint with the Javascript code. - I can't award the bounty until tomorrow

Collectives™ on Stack Overflow

How to display a tree in HTML/CSS? nested left-floating divs and wrapping

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related