View Full Version : Resizing and BorderLayout

27 Nov 2006, 5:48 PM

I wonder if anyone can help with this one!

If I have a BorderLayout thus:

layout = new YAHOO.ext.BorderLayout (document.body, {
hideOnLayout: true,
north : {},
west: {
initialSize: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
autoScroll: true
center: {

And then populate the west panel:

layout.add('west', new YAHOO.ext.ContentPanel('navigation', { toolbar: titlebar }));

Then create a couple of resizable items:

var r = new YAHOO.ext.Resizable ('springy1', { height: 150, minHeight: 150, handles: 's', pinned: true, dynamic: true });
var r = new YAHOO.ext.Resizable ('springy2', { height: 150, minHeight: 150, handles: 's', pinned: true, dynamic: true });

And I have the following divs:

<div class="ylayout-inactive-content" id="navigation">
<div width="100%" style="height: 150px;" id="springy1">
I'm springy 1
<div style="height: 150px;" id="springy2">
I'm springy 2

Then if I collapse the west panel, then slide it out and try and resize on of the "springy" divs I get the following behavior:

1. As I'm resizing the region will slide back in.
2. When I then slide it back out the springy div I was resizing has got a very strange size, it's basically resized to some "random" value.

So the question is, how would I stop this behavior? i.e. how can I stop the region sliding back in if I'm resizing the springy div?



27 Nov 2006, 5:53 PM
You can turn off autoHide. autoHide:false

27 Nov 2006, 6:18 PM
Thanks, tried that and it does work... But it's a shame to lose the auto hide behavior. Is there any way to keep that as well? I've tried a couple of methods but nothing seems to work.

27 Nov 2006, 9:11 PM
Using this sample, I was able to get some weird issues with the springy divs not resizing to completely fill the navigation panel when the panel is resized larger. Can't make it happen reliably - some combo of playing with collapsing the panel, resizing, letting it animate out, etc. Definitely not easy to find, and when it happens, it's not consistent. 1 time I saw only the 1st div not expand all the way, another time, I saw both not expand all the way, but they were off by different amounts.

<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#container {overflow:hidden;}
#center {background-color:yellow; height:100%;}
#navigation {background-color:aqua; overflow:none; padding:0; height:100%;}
#springy1, #springy2 {background-color:blue; border:solid 1px black}
<script type="text/javascript">
var test = function() {
return {
init: function() {
var layout = new YAHOO.ext.BorderLayout (document.body, {
north: {},
west: {titlebar:true, split:true, initialSize:200, minSize:175, maxSize:400, collapsible:true, fitToFrame:true },
center: {titlebar:true, autoScroll:false }

layout.add('center', new YAHOO.ext.ContentPanel('center', {title:'Center'}));
layout.add('west', new YAHOO.ext.ContentPanel('navigation', {title:'West'}));
var r1 = new YAHOO.ext.Resizable ('springy1', { height:150, minHeight:150, handles:'s', pinned:true, dynamic:true });
var r2 = new YAHOO.ext.Resizable ('springy2', { height:150, minHeight:150, handles:'s', pinned:true, dynamic:true });

YAHOO.ext.EventManager.onDocumentReady(test.init, test, true);
<div id="container" class="ylayout-inactive-content">
<div id="north"></div>
<div id="navigation">
<div style="height: 150px" id="springy1">
I'm springy 1
<div style="height: 150px" id="springy2">
I'm springy 2
<div id="center"></div>

28 Nov 2006, 3:41 PM
Yes I had the same problem, had to ditch the idea after a while.

I was thinking about having a "stacked" panel that would contain a number of panels that could each be resized, I once wrote one in java (but had lots of problems with borders) and was thinking of doing it for yui-ext, it adds a really nice ui component. I was hoping that I could "fudge it" with using Resizables.