View Full Version : sizing issues with master-detail center-south layout

18 Dec 2006, 7:16 AM
I was trying to implement a master detail page in a center-south layout where a grid lies in the center region and the detail in the south region. I had a real hard time getting the detail content to fill the south region. Finally I examined the source of yui-ext forum and noticed that it manually calculates and sizes the detail region and has to deal with resizing of all regions above, below and the splitter in between the center-south region. It also has to deal with browser resize and has various hacks for IE.

I used similar code and got my page to display as desired but it seemed like a lot more layout hacky work than should be required by the end user (which is normally not the case with yui-ext). I assume that a master / detail page like the one I'm using is a fairly common UI style and was wondering if there's anything the yui-ext layout code could incorporate to make this less work for the end user so that all they need to do is create their NestedLayoutPanel and set the content for the regions.


18 Dec 2006, 7:50 AM
You need to NOT have fitToFrame in the config of the ContentPanel that you add to the south Region, and have autoScroll:true in the config of the south Region.

18 Dec 2006, 6:17 PM
You need to NOT have fitToFrame in the config of the ContentPanel that you add to the south Region, and have autoScroll:true in the config of the south Region.

Unfortunately this is not working. Do you set any size parameters on the south region? With the above settings too the south region does not fill the south region.

When I use some other non-grid content'center' region, the center and south regions behave correctly. I think that the behaviour has to do with a grid being in a region. Besides, there must have been a reason Jack build the forum2 master-detail page that way.


18 Dec 2006, 6:47 PM
Setting up Master/Detail with BroderLayout should be a snap. What kind of problem were you running into exactly? Can you post any code?

18 Dec 2006, 8:40 PM
Since the height of the grid is not known to the south / detail pane, I understand that I need to call that adjustUI function to set the height of the south region to be containerHeight - gridHeight - 2 (splitbar). This is needed to have the south region fill the area below the botton of the grid. Correct?

Also the grid is not resizing to the center regions area when the splitter is moved and I think these URL's describe the problem and solution :



Are the methods described still valid? Do I still manually need the tweaks in order to have the grid resize correctly?


18 Dec 2006, 11:36 PM
I think those threads are outdated...
Also, if you're looking at forum2, that may be outdated too.

What you described should "just work" - the resizing and stuff should already be handled automatically.

19 Dec 2006, 1:18 PM
All of that stuff is not required with a BorderLayout, it does it for you.

19 Dec 2006, 10:53 PM
hmm, I guess I should be using the 'north' region for the master grid, and the 'center' region for the details instead of grid in center and details in south.

I'll play around some more and I'll post some code if I still cant get it to work.

20 Dec 2006, 12:21 AM
hmm, I guess I should be using the 'north' region for the master grid, and the 'center' region for the details instead of grid in center and details in south.

That's exactly what I do. It works well:


20 Dec 2006, 2:25 PM
Sweet. Were you able to kill all your resizing code?

20 Dec 2006, 2:37 PM
That was Animal's screenshot, not mine. I havent got to trying the north-center master-detail layout yet but I think it should work. I'll probably get to it tomorrow.

20 Dec 2006, 2:42 PM
Whoops. Let me know how it goes.

22 Dec 2006, 9:25 PM
I tried the master-detail using the north-center layout. The grid div has width=auto and height=150px.

When the master/ detail page loads, the detail area nicely fills the rest of the page. However there's one issue : Lets say the table has 5 rows. When I drag the splitter from the north region down a bit, the grid does not resize to fill the north region. The size of the grid remains that of the height specified in the grid div (ie 150px in this case). I tried setting fitToFrame: true but that did not help. Setting the height to auto on grid div doesnt help either as the grid sizes to a height based on the number of rows.

What I would like is that when the splitter is moved down, the height of the grid changes in such a way that the paging toolbar hugs the splitther and there may extra space beneath the last grid row and the paging toolbar if there arent enough rows.

It seems like the only way that I can get this behaviour is to manually resize the grid (like add a listener to the splitter's move event and set grid height to that of north region). Is this correct?

var innerLayout = new YAHOO.ext.BorderLayout('mylocations', {
north: {
center: {
titlebar: false,
animate: true,
cmargins: {top:2,bottom:0,right:0,left:0}

innerLayout.add('north', new YAHOO.ext.ContentPanel('mylocations-table', {title: 'Table', fitToFrame: true}));
innerLayout.add('center', new YAHOO.ext.ContentPanel('mylocations-detail', {title: 'Detail', toolbar: tb, fitToFrame: false}));

<div id="mylocations">
<div id="mylocations-table" class="ylayout-inactive-content">
<div id="mylocations-grid" style="border: 1px solid #cccccc; overflow: hidden; width: auto; height: 150px;"></div>
<div id="mylocations-detail" class="ylayout-inactive-content">
<div id="mylocations-tb"></div><div id="mylocations-body"></div>

23 Dec 2006, 3:06 AM
Use GridPanel instead of a ContentPanel when you want the grid to have the max. size of the Panel. The GridPanel will auto-size the grid..



23 Dec 2006, 8:37 AM
GridPanel did the job. I completely missed this class when going through the docs.