DockLayoutPanel inside ScrollPanel in GWT

Question

I'm using GWT 2.4 and I'm having a problem with setting up scrollbars for my app working correctly. When I'm trying to zoom the page - no scrollbars are now displayed for the whole page.

Currently my app is composed of DockLayoutPanel and is displayed in the following way:

private DockLayoutPanel appContainer = new DockLayoutPanel(Style.Unit.PX);
(...)
appContainer.addNorth(bannerSimplePanel, 104);
appContainer.addWest(menuSimplePanel, 200);
appContainer.add(new ScrollPanel(contentSimplePanel));

RootLayoutPanel.get().add(appContainer);

I want to have scrollbar configured for whole page instead of only "main content" (contentSimplePanel) of the page. I've tried to add scrollbar to the last step:

RootLayoutPanel.get().add(new ScrollBar(appContainer));

but it didn't work. With ScrollBar added for whole appContainer only banner is displayed on my page and the rest is black.

Thanks for any help.

score 6 · Accepted Answer · answered Feb 25 '13 at 09:09

6

Adding   DocklayoutPanel to a ScrollPanel won't work. The inner layout
panel's height and width will be zero.

Use

dockLPanel.getWidgetContainerElement(flowPanel).getStyle().setOverflowY(Overflow.AUTO);

Have a look on this

https://groups.google.com/forum/?fromgroups=#!topic/google-web-toolkit/BnboxugPuJQ

answered Feb 25 '13 at 09:09

Suresh Atta

120,458
37
198
307

And what is flowPanel in this case? Is it e.g. center part of dockLPanel? It won't make whole page scrollable. – zbyszek26104 Feb 25 '13 at 10:36
1

What I am saying is add overflow auto to your child's instead of whole body.If childs are big in size then automatically body scrolls. – Suresh Atta Feb 25 '13 at 10:39
Yes, but this is what I've managed to do :) I was wondering about another solution. – zbyszek26104 Feb 25 '13 at 10:44
Do You have any restrictions to use css like body{ width:150px; height:150px; overflow:scroll; } also ?? :) :) – Suresh Atta Feb 25 '13 at 10:48
No .we can give in that way also. – Suresh Atta Feb 25 '13 at 12:54

Abhijith Nagaraja · Answer 2 · 2013-02-25T10:47:08.097

0

Its a simple fix I guess.

ScrollPanel sp = new ScrollPanel();
sp.setSize( "100%", "100%" );

private DockLayoutPanel appContainer = new DockLayoutPanel( Style.Unit.PX );
appContainer.addNorth( bannerSimplePanel, 104 );
appContainer.addWest( menuSimplePanel, 200 );
appContainer.add( contentSimplePanel );

sp.add( appContainer );
RootLayoutPanel.get().add( sp );

edited Feb 25 '13 at 10:47

answered Feb 25 '13 at 04:49

Abhijith Nagaraja

3,370
6
27
55

With this solution only banner is displayed. The rest of the page is blank... I've also tried to add ScrollPanel to RootPanel: RootPanel.get().add(sp); but after that whole page is blank.... – zbyszek26104 Feb 25 '13 at 08:54
Another solution worked fine. Yours unfortunately is not working. – zbyszek26104 Feb 25 '13 at 13:48

DockLayoutPanel inside ScrollPanel in GWT

2 Answers2