overflow issue in my layout. please help... test case included...

[cgokey2]

I'm getting an overflow issue with this layout hierarchy:

A-Content Panel (Fit Layout), has a scroll bar
B-Layout Container (Fit Layout), has borders
C-Layout Container (Flow Layout) contains many widgets

if C exceeds the height of A and B, only A expands which is evident by the scroll bars, B doesn't seem to expand which is evident by the text in C overflowing outside of the border line of B. See screen shot.
https://files.me.com/cgokey/q8mt0u

Any help to make this kind of hierarchy work would be greatly appreciated.

Thanks,
Chris






import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.user.client.ui.Label;

public class TestAccordion extends LayoutContainer {
public TestAccordion() {
setLayout(new FitLayout());

ContentPanel contentPanel = new ContentPanel();
contentPanel.setLayout(new FitLayout());
contentPanel.setHeading("Overflow Issue");
contentPanel.setScrollMode(Style.Scroll.AUTOY);

LayoutContainer contentContainer = new LayoutContainer(new FitLayout());
contentContainer.setBorders(true);

LayoutContainer rowContainer = new LayoutContainer(new FlowLayout());
Label label;
for (int i=0; i<50; i++) {
label = new Label("The number is "+i);
rowContainer.add(label);
}

contentContainer.add(rowContainer);
contentPanel.add(contentContainer, new FitData(20));

add(contentPanel);


}
}




public void onModuleLoad()
{
RootPanel p = RootPanel.get();
LayoutContainer c = new LayoutContainer(new FitLayout());
c.setSize(500,500);
c.add(new TestAccordion());
p.add(c);
}

[cgokey2]

I was able to shorten the test case a little more... Now the layout hierarchy is just:
A-ContentPanel (FitLayout) has scrollbar
B-LayoutContainer (FlowLayout) has border and contains many widgets

As I add widgets to B, the scroll bar in A does appear, but the text overflows past the bottom border in B. It doesn't re-adjust B's total height for some reason.


import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;

public class TestOverflow extends LayoutContainer {
public TestOverflow() {
setLayout(new FitLayout());

final ContentPanel contentPanel = new ContentPanel();
contentPanel.setLayout(new FitLayout());
contentPanel.setHeading("Overflow Issue");
contentPanel.setScrollMode(Style.Scroll.AUTOY);


final LayoutContainer rowContainer = new LayoutContainer(new FlowLayout()) ;

Label label;
for (int i=0; i<500; i++) {
label = new Label("The number is "+i+"<br>");
rowContainer.add(label);
}
rowContainer.setBorders(true);
contentPanel.add(rowContainer, new FitData(20));
add(contentPanel);
}
}

[sven]

A FitLayout (as the name should tell) fits something into the parent size. This means there will never be any scrollbars. You need to give your inner LayoutContainer the scrollmode.