PDA

View Full Version : fitToFrame not working for ContentPanel



kwelch
9 Feb 2007, 11:05 AM
I'm experiencing an issue with the size of a ContentPanel located inside a BorderLayout. It's the div with id="west-wb-menu" and is added as the center region of the BorderLayout l6. I expected the ContentPanel to resize itself based on its content, but that isn't happening. I was wondering if my code was wrong or if there might be a bug in the Yui-Ext libraries. Any help you guys can provide is much appreciated.

Code for HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript" src="yui-ext.js"></script>
<script type="text/javascript" src="menumaster.js"></script>

<link rel="stylesheet" type="text/css" href="yui-ext.css"/>

<style type="text/css">
body {
}
/* start new layout */

body {overflow:hidden;margin:0;padding:0;border:0px none;}
html, body{height:100%;}

#layout-target0 {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px
}
</style>
</head>
<body>
<div id="layout-target0">
<div id="north-title" class="ylayout-inactive-content">
<div id="header-right"></div>
</div>


<div id="content" class="ylayout-inactive-content">
<div id="south-footer"></div>
</div>

<div id="layout-target1" class="ylayout-inactive-content"></div>
<div id="layout-target2" class="ylayout-inactive-content"></div>
<div id="layout-target3" class="ylayout-inactive-content"></div>
<div id="layout-target-wb0" class="ylayout-inactive-content"></div>
<div id="layout-target-wb1" class="ylayout-inactive-content"></div>
<div id="layout-target-feed0" class="ylayout-inactive-content"></div>

<div id="east-help" class="ylayout-inactive-content"></div>
<div id="east-feed-grid" class="ylayout-inactive-content"></div>
<div id="east-feed-preview" class="ylayout-inactive-content">
<div id="east-feed-preview-body"></div>
</div>

<div id="north-menu" class="ylayout-inactive-content"></div>

<div id="west-wb" class="ylayout-inactive-content">

</div>

<div id="west-wb-menu" class="ylayout-inactive-content">
<span>This is a test.</span>
</div>

<div id="west-wb-favorites" class="ylayout-inactive-content">

</div>

<div id="north-tabs" class="ylayout-inactive-content">
<table id="tabbar">
<tr>
<td></td>
<td><div id="ttb"></div></td>
</tr>
</table>
</div>
<div id="wb-toolbar"></div>

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


Code for menumaster.js:

YAHOO.namespace('vlayout');

YAHOO.vlayout.MenuMaster = function(){
return {
init: function(){
var bl = YAHOO.ext.BorderLayout;
var cp = YAHOO.ext.ContentPanel;
var nlp = YAHOO.ext.NestedLayoutPanel;

var l0 = new bl('layout-target0', {
hideOnLayout: true,
east: {
split: true,
initialSize: 400,
minSize: 200,
maxSize: 600,
collapsible: true,
titlebar: true,
animate: true,
autoScroll: true
},
center: {
autoScroll: false
}
});

l0.beginUpdate();

l0.add('east', new cp('east-help', {closable: false, title: 'Veraison Help'}));

var l5 = new bl('layout-target-feed0', {
center: {
autoScroll: true
},
south: {
initialSize: 175,
split: true,
collapsible: true,
titlebar: true,
animate: true,
autoScroll: true,
minSize: 50
}
});

l5.add('center', new cp('east-feed-grid', {title: 'News Articles'}));

var feedPreviewPanel = l5.add('south', new cp('east-feed-preview', {title: 'Preview'}));

var feedPanel = l0.add('east', new nlp(l5, 'News'));

var l1 = new bl('layout-target1', {
hideOnLayout: true,
north: {
split: false
},
center: {
autoScroll: false
}
});

l1.add('north', new cp('north-title', {fitToFrame: true}));

var l2 = new bl('layout-target2', {
hideOnLayout: true,
north: {
split: false,
initialSize: 24,
autoScroll: false
},
west: {
split: true,
initialSize: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
titlebar: true,
animate: true
},
center: {
autoScroll: false
}
});

l2.add('north', new cp('north-menu', {fitToFrame:true}));

var l4 = new bl('layout-target-wb0', {
hideOnLayout: true,
south: {
split: false,
titlebar: false,
autoScroll: false,
initialSize: 125
},
center: {
autoScroll: false
}
});

var l6 = new bl('layout-target-wb1', {
hideOnLayout: true,
south: {
split: false,
titlebar: false,
autoScroll: false
},
center: {
autoScroll: false,
autoHeight: true
}
});

l6.add('center', new cp('west-wb-menu', { fitToFrame: true }));
l6.add('south', new cp('west-wb-favorites', { fitToFrame: true }));

l4.add('south', new nlp(l6));
l4.add('center', new cp('west-wb'));

l2.add('west', new nlp(l4));

var l3 = new bl('layout-target3', {
hideOnLayout: true,
north: {
split: false,
initialSize: 30
},
center: {
autoScroll: true
}
});

l3.add('north', new cp('north-tabs', {fitToFrame: true}));
l3.add('center', new cp('content'));

l2.add('center', new nlp(l3));
l1.add('center', new nlp(l2));
l0.add('center', new nlp(l1));

l0.getRegion('east').collapse(true);

l0.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(YAHOO.vlayout.MenuMaster.init, YAHOO.vlayout.MenuMaster, true);