davglass/LayoutSizingProblem.html

## LayoutSizingProblem.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Nested Layout</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
#toggle {
    text-align: center;
    padding: 1em;
}
#toggle a {
    padding: 0 5px;
    border-left: 1px solid black;
}
#tRight {
    border-left: none !important;
}

.yui-log .myMessage
{
    background-color:#66ffff;
}

</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css" />


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/layout.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/logger.css"/>

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>

<!-- Utility Dependencies -->
<!--<script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>-->
<script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/layout/layout-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>


</head>
<script>
var layoutOutter;
var layoutInner;
var logReader;
var MIN_TABLE_VIEW_HEIGHT = 150;


    function layoutInnerRendered() {
        layoutInner.on('resize', function(eventInfo) {
            if (layoutInner) {
                var maxHeight = computeBottomUnitMaxHeight(),
                    height = computeBottomUnitHeight(),
                    bottom = layoutInner.getUnitByPosition('bottom');
                    //console.log(height, ' :: ', maxHeight);
                    if (height > maxHeight) {
                        height = maxHeight;
                        bottom.set("height", height, true);
                    }
                    //console.log(height, ' :: ', maxHeight);
                //This is the real bug, you can't set maxHeight after the initial set.
                //Bug added: http://yuilibrary.com/projects/yui2/ticket/2527706
                bottom._resize.set("maxHeight", maxHeight, true);
            }
        });

    }

    function layoutOutterRendered() {
        var el = layoutOutter.getUnitByPosition('center').get('wrap');

        layoutInner = new YAHOO.widget.Layout(el, {
            parent: layoutOutter,
            units: [
                { position: 'center', header: 'Table', body: 'selectorDiv', gutter: '2px', resize: false },
                { position: 'bottom', header: 'Bottom', resize: true, height: computeBottomUnitHeight(), maxHeight: computeBottomUnitMaxHeight(), body: 'detailsDiv', gutter: '2px', collapse: true, collapseSize: 50, scroll: false }
            ]
        });

        layoutInner.on("render",layoutInnerRendered );
        layoutInner.render();
    }

    function initLayoutOutter() {
        // Whole page layout
        layoutOutter = new YAHOO.widget.Layout(
        {
            units: [
                { position: 'top', resize: false, body: 'topRowDiv', height:50 },
                { position: 'right', header: 'Debugging Logger', width: 300, resize: true, gutter: '2px 5px', collapse: true, scroll: true, body: 'loggerDiv', maxWidth: 1000 },
                { position: 'left', id: "layoutNavBar", header: 'Catalog', width: 200, resize: true, body: 'navbarDiv', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 },
                { position: 'center', body: 'centerDiv' }
            ]
        });


        layoutOutter.on("render", layoutOutterRendered );
        layoutOutter.render();
    }


    function computeBottomUnitMaxHeight() {
        // Get the available height from the outter's center unit
        var el = layoutOutter.getUnitByPosition('center').get('wrap');
        var availHeight = layoutOutter.getSizes().center.h;

        //console.log(el.offsetHeight, ' :: ', availHeight, ' - ', MIN_TABLE_VIEW_HEIGHT, ' = ', (availHeight - MIN_TABLE_VIEW_HEIGHT));
        // Give table, ie the inner center unit, a minimum height
        var maxDetailHeight = availHeight - MIN_TABLE_VIEW_HEIGHT;

        //console.log("computeMax(): max: " + maxDetailHeight + " availHeight: " + availHeight, "myMessage");

        return maxDetailHeight;
    }

    function computeBottomUnitHeight() {
        var detailsHeight;

        // Get the available height from the outter's center unit
        var el = layoutOutter.getUnitByPosition('center').get('wrap');
        var availHeight = el.offsetHeight;

        // we'll take 1/3 for table and 2/3 for details, but give table a minimum
        if ( availHeight * 0.33 > MIN_TABLE_VIEW_HEIGHT ) {
            detailsHeight = availHeight  * 0.66;
        } else {
            detailsHeight = availHeight - MIN_TABLE_VIEW_HEIGHT;
        }

        //console.log("computeH(): h: " + detailsHeight + " availHeight: " + availHeight, "myMessage");

        return detailsHeight;
    }

    function onDomReady () {
        logReader = new YAHOO.widget.LogReader("loggerDiv");
        initLayoutOutter();
    }


    YAHOO.util.Event.onDOMReady(onDomReady);

</script>


<body class=" yui-skin-sam">

    <div style="position:absolute;width:100%;" >

        <div id="topRowDiv" />
        <div id="selectorDiv" />
        <div id="navbarDiv" />
        <div id="loggerDiv" />
        <div id="detailsDiv" />
        <div id="centerDiv" />

    </div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Nested Layout</title>
	<style type="text/css">
	body {
	margin:0;
	padding:0;
	}
	#toggle {
	text-align: center;
	padding: 1em;
	}
	#toggle a {
	padding: 0 5px;
	border-left: 1px solid black;
	}
	#tRight {
	border-left: none !important;
	}

	.yui-log .myMessage
	{
	background-color:#66ffff;
	}

	</style>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css" />


	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/layout.css"/>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css"/>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/logger.css"/>

	<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dom/dom-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>

	<!-- Utility Dependencies -->
	<!--<script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>-->
	<script src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
	<script src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
	<script src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
	<script src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
	<script src="http://yui.yahooapis.com/2.6.0/build/layout/layout-min.js"></script>
	<script src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>



	</head>
	<script>
	var layoutOutter;
	var layoutInner;
	var logReader;
	var MIN_TABLE_VIEW_HEIGHT = 150;


	function layoutInnerRendered() {
	layoutInner.on('resize', function(eventInfo) {
	if (layoutInner) {
	var maxHeight = computeBottomUnitMaxHeight(),
	height = computeBottomUnitHeight(),
	bottom = layoutInner.getUnitByPosition('bottom');
	//console.log(height, ' :: ', maxHeight);
	if (height > maxHeight) {
	height = maxHeight;
	bottom.set("height", height, true);
	}
	//console.log(height, ' :: ', maxHeight);
	//This is the real bug, you can't set maxHeight after the initial set.
	//Bug added: http://yuilibrary.com/projects/yui2/ticket/2527706
	bottom._resize.set("maxHeight", maxHeight, true);
	}
	});

	}

	function layoutOutterRendered() {
	var el = layoutOutter.getUnitByPosition('center').get('wrap');

	layoutInner = new YAHOO.widget.Layout(el, {
	parent: layoutOutter,
	units: [
	{ position: 'center', header: 'Table', body: 'selectorDiv', gutter: '2px', resize: false },
	{ position: 'bottom', header: 'Bottom', resize: true, height: computeBottomUnitHeight(), maxHeight: computeBottomUnitMaxHeight(), body: 'detailsDiv', gutter: '2px', collapse: true, collapseSize: 50, scroll: false }
	]
	});

	layoutInner.on("render",layoutInnerRendered );
	layoutInner.render();
	}

	function initLayoutOutter() {
	// Whole page layout
	layoutOutter = new YAHOO.widget.Layout(
	{
	units: [
	{ position: 'top', resize: false, body: 'topRowDiv', height:50 },
	{ position: 'right', header: 'Debugging Logger', width: 300, resize: true, gutter: '2px 5px', collapse: true, scroll: true, body: 'loggerDiv', maxWidth: 1000 },
	{ position: 'left', id: "layoutNavBar", header: 'Catalog', width: 200, resize: true, body: 'navbarDiv', gutter: '2px 5px', collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 },
	{ position: 'center', body: 'centerDiv' }
	]
	});


	layoutOutter.on("render", layoutOutterRendered );
	layoutOutter.render();
	}


	function computeBottomUnitMaxHeight() {
	// Get the available height from the outter's center unit
	var el = layoutOutter.getUnitByPosition('center').get('wrap');
	var availHeight = layoutOutter.getSizes().center.h;

	//console.log(el.offsetHeight, ' :: ', availHeight, ' - ', MIN_TABLE_VIEW_HEIGHT, ' = ', (availHeight - MIN_TABLE_VIEW_HEIGHT));
	// Give table, ie the inner center unit, a minimum height
	var maxDetailHeight = availHeight - MIN_TABLE_VIEW_HEIGHT;

	//console.log("computeMax(): max: " + maxDetailHeight + " availHeight: " + availHeight, "myMessage");

	return maxDetailHeight;
	}

	function computeBottomUnitHeight() {
	var detailsHeight;

	// Get the available height from the outter's center unit
	var el = layoutOutter.getUnitByPosition('center').get('wrap');
	var availHeight = el.offsetHeight;

	// we'll take 1/3 for table and 2/3 for details, but give table a minimum
	if ( availHeight * 0.33 > MIN_TABLE_VIEW_HEIGHT ) {
	detailsHeight = availHeight * 0.66;
	} else {
	detailsHeight = availHeight - MIN_TABLE_VIEW_HEIGHT;
	}

	//console.log("computeH(): h: " + detailsHeight + " availHeight: " + availHeight, "myMessage");

	return detailsHeight;
	}

	function onDomReady () {
	logReader = new YAHOO.widget.LogReader("loggerDiv");
	initLayoutOutter();
	}


	YAHOO.util.Event.onDOMReady(onDomReady);

	</script>


	<body class=" yui-skin-sam">

	<div style="position:absolute;width:100%;" >

	<div id="topRowDiv" />
	<div id="selectorDiv" />
	<div id="navbarDiv" />
	<div id="loggerDiv" />
	<div id="detailsDiv" />
	<div id="centerDiv" />

	</div>
	</body>
	</html>