GWT ScrollPanel not showing the complete content

Question

I use AbsolutPanel as the main panel. I add another AbsolutPanel as header to the main panel. Now I add a ScrollPanel to the main panel. The ScrollPanel includes 30 buttons on another panel. The last button is not shown completely while scrolling.

If I remove the header AbsolutPanel everything is shown - if I increase the heigh of the header panel less is shown. The scrollable area of the ScrollPanel which includes the VerticalPanel is exactly reduced with the high of the header panel which is outside of the ScrollPanel. If I use "Overflow.SCROLL" for the main panel I can scroll to the end of the verticalPanel but also the header panel is scrolled in this case.

every help is greatly appreciated - thanks!

To reproduce this problem I did the following test:

AbsolutePanel main = new AbsolutePanel();
RootLayoutPanel.get().add(main);
main.setSize("100px", "100%");

AbsolutePanel header = new AbsolutePanel();
main.add(header);
header.add(new Label("HEADER"));

VerticalPanel content = new  VerticalPanel();
ScrollPanel scroll = new ScrollPanel(content);
scroll.setSize("100px", "100%");
main.add(scroll);

for (int i = 0; i < 30; i++)
    content.add(new Button("Button :" + i));

Answer 1

Your VerticalPanel is based on a table which is trying to fill 100% of parent container. Do not think that your layouting is a good approach. Check https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels regarding layouting.

I recommend you to use DockLayoutPanel to to create 100% height layout with header. And Not to use VerticalPanel if you would start to use panel with [Layout] in panel name. They are Div-based. It is important not to mix div and tables if you not sure how browser will handle it.

Answer 2

Since you are using a combination of Absolute Panel, Vertical Panel and Scroll Panel, None of them are Layout Panels. So you need to see the height of Scroll Panel to some definite height, instead of giving it in percentage.

Change your code

scroll.setSize("100px", "100%");

to

scroll.setSize("100px", "500px");

And TADA, it works and you get a scroll.