I've mentioned in the past that I’m working on a tree control that would also support any number of columns. I also talked about using DIV instead of TABLE to layout the tree and the problem of lining up the columns in a straight vertical line. Today I will write about the solution I found.
Here’s a simplified example of the tree with all non-essential code removed:
<div id="treeElement" class="tree">
<div id="node1" class="expanded">
<span class="body">Node 1</span>
<span class="columns">
<span class="column">Node 1 column 1</span>
</span>
<div class="children">
<div id="node2" class="leaf">
<span class="body">Node 2</span>
<span class="columns">
<span class="column">Node 2 column 1</span>
</span>
</div>
</div>
</div>
</div>
With the following style sheet applied:
.tree
{
cursor: default;
white-space: nowrap;
float: left;
position: relative;
}
.tree *
{
position: relative;
}
.tree .columns
{
position: absolute;
top: 0;
right: -200px;
}
.tree .children
{
margin-left: 20px;
}
Columns are wrapped inside SPAN element (of “columns” class and absolute position). This and negative right coordinate will cause the columns to show up to the right of the tree. There was a problem in Mozilla with column cells and their tree nodes moving down when the tree expands, but collumn cells are nore moving back up when the tree collapses. Making “position: relative” for all elements inside the tree fixed the problem. “top: 0” is required to fix layout problems in IE working in quirks mode and it’s probably a good idea to have both horizontal and vertical coordinates declared to confuse the browser less.
There are more problems with the tree and CSS and I will probably write about them soon.
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5