Post by crystalfrost on Feb 20, 2014 8:48:54 GMT -8
I have a table in my sidebar that contains a lot of content, and I'd like it to be able to scroll. It's the "Navigation" headed one.
Actually, it is scrolling, but there's no scroll bar. If you use the arrow keys or the scroll wheel on the mouse, it will move the content up and down. I'd like the scroll bar to show up, though.
My Board: all-around-rp.proboards.com
Here's the code I'm using.<style type="text/css">
.tab
{
margin-left:20px;
}
</style>
<script language="javascript">
$(document).ready(function () {
$('label.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});
</script>
<div class="well" style="width:300px; padding: 8px 0;">
<div style="overflow-y: auto; overflow-x: hidden; height: 300px;">
<ul class="nav nav-list">
<li><label class="tree-toggler nav-header">?</label>Paranormal
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><label class="tree-toggler nav-header">?</label>Secret World
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><label class="tree-toggler nav-header">?</label><a href="http://all-around-rp.proboards.com/page/the-malum">The Malum</a>
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><a href="#">Demons</a></li>
<li class="tab"><a href="#">Vampires</a></li>
</ul>
</li>
<li class="tab"><a href="http://all-around-rp.proboards.com/page/the-protectors">The Protectors</a></li>
</ul>
</li>
<li class="tab"><label class="tree-toggler nav-header">?</label>Mortal Instruments
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><label class="tree-toggler nav-header">?</label>New York
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><a href="#">Institute</a></li>
<li class="tab"><a href="#">Werewolves</a></li>
</ul>
</li>
<li class="tab"><label class="tree-toggler nav-header">?</label>Los Angeles
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><a href="#">Institute</a></li>
<li class="tab"><a href="#">Werewolves</a></li>
</ul>
</li>
<li class="tab"><label class="tree-toggler nav-header">?</label>London
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><a href="#">Institute</a></li>
<li class="tab"><a href="#">Werewolves</a></li>
</ul>
</li>
<li class="tab"><label class="tree-toggler nav-header">?</label>Paris
<ul class="nav nav-list tree" style="display:none">
<li class="tab"><a href="#">Institute</a></li>
<li class="tab"><a href="#">Werewolves</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li class="divider"></li>
<li><label class="tree-toggler nav-header">?</label>Myths and Magic
<ul class="nav nav-list tree" style="display:none">
<li class="tab">Kingdoms of Albion</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggler nav-header">?</label>Animal Worlds
<ul class="nav nav-list tree" style="display:none">
<li class="tab">Warriors</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggler nav-header">?</label>Sci-Fi
<ul class="nav nav-list tree" style="display:none">
<li class="tab">X-Men</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggler nav-header">?</label>Anime
<ul class="nav nav-list tree" style="display:none">
<li class="tab">Naruto</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggler nav-header">?</label>Realistic
<ul class="nav nav-list tree" style="display:none">
<li class="tab">High School</li>
</ul>
</li>
</div>
</div>
