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!

Answer 1

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