I am working on a page to display a family tree and I have a couple of problems that I just can't solve. If the tree has more than 3 or 4 generations, the div containing it is bigger than the viewport. Therefore I need the div to be scrollable and draggable (I'm using dragscroll.js for the dragging bit).
Problem 1: I need the width and height of the div to be flexible in order to fit the available space in the viewport. This works fine in the width direction, but the div isn't scrollable in the height direction unless it has a fixed height in pixels. I've tried all sorts of alternatives (no height, height in %, height:auto, height:inherit) but in all cases the div is not scrollable and a scrollbar appears on the whole window instead.
Problem 2: When first opening the page the div is left-aligned whereas I want it to start centre-aligned. I asked about this before in Centering a DIV that is wider than the viewport but I didn't get an answer that worked. Things have changed a bit since then, so perhaps someone can help this time.
The html is
<-- Header -->
<div id="wholetree">
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen">
<input type="hidden" name="MM_insert" value="add_gen">
<a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a>
</form>
<form action="map.php" method="get" name="view_map">
<input type="hidden" name="origin" value="<?php echo $origin_id ?>">
<a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a>
</form>
<div id="tree" class="dragscroll">
<-- Unordered list to make the family tree --.
</div>
And the relevant part of the CSS is
#wholetree{position:relative;top:96px;padding-top:15px}
#tree {
position:relative;
overflow:auto;
padding:10px;
height:400px;
background-color:#f2f2ff;
border:#CCF 1px solid
}
#tree ul {
padding: 0 0 20px;
position: relative;
}
#tree li {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 0 5px 20px 5px;
}
A sample of the page can be seen here: http://myrootsmap.com/soexample.php
SOLUTIONS
Problem 1: AllDani pointed me in the right direction. Horizontal scrolling was working correctly so I changed overflow:auto to overflow-x:auto. Then added overflow-y:scroll and adjusted the height to something that looks right on most screens. It's not ideal because there is sometimes a redundant scrollbar and when the tree is small, and there is a second (body) scrollbar when the tree is unusually large, but I think I can live with it. So the change to the CSS was
#tree {
position:relative;
overflow-x:auto;
overflow-y:scroll;
padding:10px;
height:490px;
background-color:#f2f2ff;
border:#CCF 1px solid;
}
Problem 2: Jquery came to my rescue here. I measured the div with scrollWidth and then scrolled the div halfway to centre it with scrollLeft. At the same time I also used to scrollTop to scroll the div down if it is taller than the available space.
$(document).ready(function(){
var windowWidth = $(window).width();
var treeWidth = $('#tree').get(0).scrollWidth;
var d = $('#tree');
d.scrollTop(d.prop("scrollHeight"));
d.scrollLeft((treeWidth-windowWidth)/2);
});
I'll leave the sample page available so that anyone following can see how it all works in it's final form.
