Question

I’m having trouble setting up a simple layout. I want a canvas below a vertical panel. Something like:

VerticalPanel parent = new VerticalPanel();
parent.setWidth("100%");
parent.setHeight("100%");

HorizontalPanel hp = new HorizontalPanel();
hp.setWidth("100%");
parent.add(hp);

Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100%");
canvas.setHeight("100%");
parent.add(canvas);

So basically I want the top panel “hp” to be only as high as its content needs it to be, and the rest of the page should be filled with the canvas element. But I’m getting strange effects, the canvas seems to only fill a portion of the screen etc. It reports its height after layout at around 200px, whereas the available height should be around 600px.

Thanks

Answer 1

Probably canvas does not take up all space because contains nothing or because the size was not set and defaults to 300px. See this: GWT Canvas – Save image and open it

UPDATE:

Vertical and Horizontal panels are just HTML tables. They will take as much space as the height of their contents.

Instead you could use: DockLayoutPanel

public void onModuleLoad() 
{
    DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PCT);
    dockLayoutPanel.addNorth(new Label("My header"),5);

    Canvas canvas = Canvas.createIfSupported();
    canvas.getElement().getStyle().setBackgroundColor("red");
    canvas.setWidth("100%");
    canvas.setHeight("100%");

    dockLayoutPanel.add(canvas);

    RootLayoutPanel.get().add(dockLayoutPanel);
}

Also check: Developer’s Guide – Layout Using Panels