TreeView and Horizontal Scrolling

This simple example is designed to illustrate the simplest approach to allowing a TreeView Control implementation to spread out horizontally beyond the dimensions allocated for it on the page. If a TreeView is constrained spatially, its visual treatment will degrade. To prevent this:

• Wrap the element into which your TreeView will be rendered within a container element. Do not specify a width for the element into which you're rendering your TreeView; allow it to expand horizontally as needed.
• Using CSS, specify a width for the container element.
• Using CSS, specify the overflow-x property to be auto.

If you were to write the CSS inline, the markup for this solution would look as follows:

<div id="parentTreeDiv" style="width:300px;overflow-x:auto;">
	<div id="treeDiv1"><!-- TREE RENDERED HERE --></div>
</div>

Please note that text in your tree will wrap if it can — this technique will only force scrolling if the TreeView instance can not naturally be constrained within the given space. To force scrolling even when the tree is not constrained, you would need to wrap parentTreeDiv around an inner element with a width set to the desired width allocated for your tree.

<div id="outerwrapper" style="width:300px;height:150px;overflow-x:auto;"> <div id="parentTreeDiv2" style="width:600px;height:130px;overflow-x:auto;"> <div id="treeDiv2"><!-- TREE RENDERED HERE --></div> </div> </div> <script type="text/javascript"> function treeInit2() { var tree = new YAHOO.widget.TreeView("treeDiv2"); var tmpNode; for (var i = 0; i < 3; i++) { tmpNode = new YAHOO.widget.TextNode(i + "_long_node_label_yyyy yyyyyyyy yyyyyy yyyyyy yyyyyy yyyyyy yyyyyy yyyyyy yyyyyy yyyyyy yyyyyyy" + i, tree.getRoot(), false); } tmpNode = new YAHOO.widget.TextNode("child node", tmpNode, false); tmpNode = new YAHOO.widget.TextNode("grandchild node", tmpNode, true); tmpNode = new YAHOO.widget.TextNode("great grandchild node", tmpNode, false); tree.draw(); } YAHOO.util.Event.addListener(window, "load", treeInit2);