views:

300

answers:

1

In IE6, the expander graphic for the root node in the table is not showing up. If I position the mouse in the correct spot next the the root nodes text I can actually click the expander.

The expander does show up for all child nodes.

The odd thing is the examples at the TreeView site show the root expander image in IE6. I can't see the difference between the examples code and mine. I did a side by side comparison of the CSS for the elements in question and nothing jumps out at me.

I have no extra styling than the stylesheet that came with the plug-in provides.

<script type="text/javascript">
    $(document).ready(function() {
        $("#tree").treeTable();
    });
</script>

-

<body>
    <table id="tree">
      <tr id="node-1">
        <td>Parent</td>
      </tr>
      <tr id="node-2" class="child-of-node-1">
        <td>Child</td>
      </tr>
      <tr id="node-3" class="child-of-node-2">
        <td>Child</td>
      </tr>
    </table>
</body>
+1  A: 

Just for reference, since i ran into this trouble too...

The first parent image doesn't show because the space for the image to be is too small, so the treetable.css and treetable.js need to be modified.

In jquery.treeTable.js, change the line:

cell.prepend('<span style="margin-left: -' + options.indent + 'px; padding-left: ' + options.indent + 'px" class="expander"></span>'); To:

cell.prepend('<span class="expander"></span>');

And in jquery.treeTable.css, add the last two lines (margin-left and padding-left) to ".treeTable tr td .expander":

.treeTable tr td .expander {  
background-position: left center;  
background-repeat: no-repeat;  
cursor: pointer;  
padding: 0;  
zoom: 1; /* IE7 Hack */    
margin-left: -3px;  
padding-left: 15px;}

°°°°°°°°°°°°°°°°°°°°°°°°° I didn't Modify the Code, the above tip was taken from: http://javathoughts.capesugarbird.com/2009/03/jquery-tree-table-for-wicket.html

-VicSan.

VicSan