Nesting Viewports

[chuckie474]

I have a page where I need to nest viewports. The problem is that the inner viewport is sized to the browser page and ends up adding scrollbars. Is there a way to do this? Or maybe there is a better way for me to design the page:

- I have a main Viewport so I could have a static header and footer.
- I use a DockLayoutPanel where the north panel is the header, the south panel is the footer, and the center panel is a scrollable VerticalLayoutContainer.
- The center panel is where the second Viewport is added. This is where the unnecessary scrollbars show up. I need a Viewport here in order to correctly lay out my page which uses a BorderLayoutContainer. I use the BorderLayoutContainer because my page needs to be split up into three widgets: west/center/south. I haven't been able to find a way to get the page to layout correctly without using the second Viewport.

Please let me know if there is a way to accomplish this. Thanks!

[Colin Alworth]

The purpose of Viewport is to size to all available space in the browser. This means that it never makes sense to nest them, and almost never makes sense to use more than one.

Why are you using both DockLayoutPanel and BorderLayoutContainer? Why not just a BorderLC, or two BorderLCs? At least that will be more consistent about how layouts are performed.

That said, you do not need and should not have a Viewport inside the DockLayoutPanel. It should be possible to add the BorderLC to the DockLP (but see above).

And if you are just using the DockLayoutPanel for a header, consider a VerticalLayoutContainer - set the top item to be a fixed size, and the 'center' region then to be 1.0,1.0 (i.e. take all remaining width and height)

Can you put this layout setup into a simple EntryPoint so that other users can try to run it and make suggestions about how else you might build this setup?

[chuckie474]

Thank you! This helped me find the problem within my code. I had an extra VerticalPanel and VerticalLayoutContainer that, when removed, helped display the BorderLC correctly. It seems that when the BorderLC is in a VerticalLC, it puts the south container on top. Weird.

The reason I needed a Viewport with DockLP is that I had a header and a footer, and I needed a way to be able to add additional static headers (depending on which page I was viewing). The Viewport is used amongst all the pages in my app. So sometimes it will have an additional north widget that displayed navigational buttons along with a menu bar, and sometimes it will only have a menu bar. So I needed the flexibility to be able to add multiple north widgets.

[Colin Alworth]

VerticalLC should behave with a BorderLC in it, provided you give the BorderLC a size - what VerticalLayoutData did you assign when you added it?

public class Test implements EntryPoint {

  public void onModuleLoad() {
    //Only make one viewport, that gets added to the root panel
    Viewport root = new Viewport();
    
    //First, the outer wrapper:
    VerticalLayoutContainer outer = new VerticalLayoutContainer();
    //Header section can go in here - take all width available (i.e. 1.0), and only height required(i.e. -1):
    outer.add(new Label("Replace with real header"), new VerticalLayoutData(1.0, -1));
    
    BorderLayoutContainer border = new BorderLayoutContainer();
    //add content to the border LC...
    border.setNorthWidget(createContentPanel("North"));
    border.setSouthWidget(createContentPanel("South"));
    border.setEastWidget(createContentPanel("East"));
    
    border.setCenterWidget(createContentPanel("Center"));
    
    //Add the BorderLC with both height/width as 1.0 to use all remaining space:
    outer.add(border, new VerticalLayoutData(1.0,1.0));
    
    root.setWidget(outer);
    
    RootPanel.get().add(root);
  }

  private ContentPanel createContentPanel(String heading) {
    ContentPanel panel = new ContentPanel();
    panel.setHeadingText(heading);
    panel.setWidget(new Label(heading + " content goes here"));
    return panel;
  }
}