I have a nested list that lists child nodes when the parent node is expanded. The parent node is expanded by clicking an image to the left of the text.
Unfortunately, it expands right off the page. I would like a scrollbar to appear when the content is off the page.
When I set "overflow: auto", a scrollbar never pops up, it just expands off the page and removes the expansion image on left of the list items.
Here's sample .html:
<body>
<div id="theDiv" style="clear: left;">
<ul id="theList">
<li id="1" class="parent">
<img class="expanded" align="absmiddle" src="./tree_expanded.gif"/>
Parent1
<ul style="display: block;">
<li id="10">
.....
</ul>
</li>
....
</ul>
</div>
</body>
Here's sample .js:
function expand() {
if(this.className == "expand") {
jQuery(this.parentNode).children("ul").show();
this.className = "expanded";
this.src = "/_images/tree_expanded.gif";
}
else {
jQuery("ul", this.parentNode).hide();
this.className = "expand";
this.src = "/_images/tree_unexpanded.gif";
}
}
Here's sample .css:
#theList {
margin-top: 0;
}
#theList, #theList ul {
list-style: none;
margin: 5px 20px;
padding: 0;
}
#theList .expand, #theList .expanded {
margin-left: -20px;
cursor: pointer;
}
#theList img {
margin-right: 5px;
}
#theList ul {
display: none;
}
#theList li {
white-space: nowrap;
margin-bottom: 4px;
}