I have a problem with autosizing. It goes fine in FF and Chrome but not in IE6/7 maybe 8.
What i have is like a div which contains the tree and is placed in a parent tree. When the tree
gets too big i want the parent tree to scroll and not the tree itself, how to do that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./codebase/dhtmlxtree.css" />
<script src="./codebase/dhtmlxcommon.js"></script>
<script src="./codebase/dhtmlxtree.js"></script>
<script src="./codebase/ext/dhtmlxtree_json.js"></script>
<style type="text/css">
html, body {
height: 100%;
}
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- the parent div -->
<div style="width:150px; height : 400px; border : 1px solid black; overflow : auto;" >
<!-- the tree container -->
<div id="treeboxbox_tree" style="width:100%; height: auto; background-color: yellow; " />
<script type="text/javascript">
var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("./codebase/imgs/csh_bluefolders/");
tree.enableIEImageFix(true);
tree.loadJSONObject({id :0, item : [{id : 1, text : 'ohst2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/ohst2'}],item : [{id : 2,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 3, text : 'ohst2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/ohst2/ohst2'}],item : [{id : 4,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 5, text : 'Old',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/ohst2/ohst2/Old'}],item : [{id : 6,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 7, text : 'New',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/ohst2/ohst2/Old/New'}],item : [{id : 8,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]},{id : 9, text : 'Old v2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/ohst2/ohst2/Old/Old v2'}],item : [{id : 10,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]}]}]}]},{id : 11, text : 'zip4j_examples_1.2.6',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6'}],item : [{id : 12,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 13, text : 'Zip4jExamples',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples'}],item : [{id : 14,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 15, text : 'src',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src'}],item : [{id : 16,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 17, text : 'net',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net'}],item : [{id : 18,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 19, text : 'lingala',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala'}],item : [{id : 20,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 21, text : 'zip4j',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala/zip4j'}],item : [{id : 22,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 23, text : 'examples',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala/zip4j/examples'}],item : [{id : 24,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 25, text : 'extract',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala/zip4j/examples/extract'}],item : [{id : 26,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]},{id : 27, text : 'misc',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala/zip4j/examples/misc'}],item : [{id : 28,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]},{id : 29, text : 'zip',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/Temp/heijmen/zip4j_examples_1.2.6/Zip4jExamples/src/net/lingala/zip4j/examples/zip'}],item : [{id : 30,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]}]}]}]}]}]}]}]},{id : 31, text : 'ohst2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/ABN/ohst2'}],item : [{id : 32,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 33, text : 'ohst2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/ABN/ohst2/ohst2'}],item : [{id : 34,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 35, text : 'Old',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/ABN/ohst2/ohst2/Old'}],item : [{id : 36,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] },{id : 37, text : 'New',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/ABN/ohst2/ohst2/Old/New'}],item : [{id : 38,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]},{id : 39, text : 'Old v2',userdata : [{name : 'directory', content : 'true'},{name : 'filepath', content : '/Knowledge Base Web Viewer/File/ABN/ohst2/ohst2/Old/Old v2'}],item : [{id : 40,text : 'dummy', userdata : [{name : 'dummy', content : 'true'}] }]}]}]}]}]});
</script>
</div>
<button value="insertnodes" name="insertnodes" onclick="tree.insertNewChild(1,41,'test1');tree.insertNewChild(41,42,'test1');tree.insertNewChild(42,43,'test1');tree.insertNewChild(43,44,'test1');return false;"></button>
</body>
</html>Clicking button insert some nodes which also seems to create problems in IE as then scrollbars for height appear aswell even though there is enough height left.
So I was just wondering how to solve it?