Fixed size, Scrollable area within page. Or, header & footer.

[hopey_dishwasher]

Hiya. I thought this one would be simple, but I can't fins a solution for it anywhere.

Using smartgwt 2.4.

I want to put a layout of some sort within a page, that content can dynamically be added to. I want this to be a fixed size, and when the added content exceeds this size, it shows scrollbars.

The root layout of the page is a 100%x100% VLayout.
Within this is a header, a "content" Layout, and a footer. I change the content Layout as the user goes to different pages, and it is always set to 100%x100%.

If within this content layout, I add a VLayout with a fixed size, and dynamically add widgets to this (just Labels or HTMLFlows), then it continues to expand, pushing the footer off the screen, and giving a whole-browser scrollbar.

Am I doing something wrong here? How can I get my content to have nice scrollbars like listgrids and whatnot have?

Currently something like:

Layout rootLayout = new VLayout();
rootLayout.setwidth100();
rootLayout.setheight100();

Canvas header = ... a menubar or something;
Layout pageContent = new HLayout();
Canvas footer = ... a HLayout or something;

pageContent.setWidth100();
pageContent.setHeight100();

rootLayout.addMember(header);
rootLayout.addMember(pageContent);
rootLayout.addMember(footer);

...

pageContent.addMember([other parts of the page layout]);

Layout problemWidget = new VLayout();
problemWidget.setHeight(200);
problemWidget.setMaxHeight(200);
problemWidget.setWidth(200);
problemWidget.setMaxWidth(200);

pageContent.addMember(problemWidget); //or it may be added nested more deeply within pageContent

...

problemWidget.addMember(someWidget); // many times

And the entire page grows to accommodate the added widgets, the footer going off the page. No scrollbars appear on problemWidget. It seems to ignore the setting of its width & height.

What am I doing wrong here?

Thanks.

[Isomorphic]

setOverflow(auto)

[hopey_dishwasher]

Thanks, I knew it would be simple.

[shmeets]

This also works well using SmartGWT 2.2, and we use this strategy on many of our pages.

But if we display one of these pages on a mobile device with a touch screen interface (iPad or iPhone), we don't really want the user to have to scroll using the scroll bars. We would rather have them not see the scroll bars and they would scroll just using their finger. Scroll bars on mobile devices are so small as to be virtually unusable, especially on a phone.

Is that possible in SmartGWT 2.2? If not, we're willing to move to a newer release where it is possible.

Thanks,
Peter

[Isomorphic]

Current releases of SmartGWT automatically support finger scrolling on grids and other scrollable areas - it's up to you whether you want to *also* show the scrollbars on mobile devices. The setting canvas.showCustomScrollbars can be changed in load_skin.js or on the fly, before any components are created.