VLayout and DrawPane exceed size of div which contain them

[NeilAgg]

I am trying to add a DrawPane to an existing div in my html but the layout is exceeding the size of the div.
Here is a screenshot:


The div has a black outline, the layout has a blue outline, and the draw pane has a red outline.
I don't want the layout to overlay the Contact Info.

How do I do that?

Here is the code for my module:

package com._3dmathpuzzles.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.layout.VLayout;

public class DiagonalSlitherlink2 implements EntryPoint {
  private DrawPane drawPane;

  @Override
  public void onModuleLoad() {
    drawPane = new DrawPane();
    drawPane.setShowEdges(true);
    drawPane.setEdgeSize(1);
    drawPane.setBorder("1px solid #ff0000");
    drawPane.setCanDragScroll(true);
    drawPane.setZoomLevel(0.5);
    drawPane.addDrawHandler(new PuzzleDrawHandler());

    VLayout layout = new VLayout();
    layout.setBorder("1px solid #0000ff");
    layout.setLayoutMargin(0);
    layout.setMembersMargin(0);
    layout.addMember(drawPane);
    layout.setHtmlElement(Document.get().getElementById("gwt"));
    layout.addDrawHandler(new LayoutDrawHandler());
    layout.draw();
  }
}

Here is the PuzzleDrawHandler:

package com._3dmathpuzzles.gwt.client;

import com.smartgwt.client.widgets.drawing.DrawLine;
import com.smartgwt.client.widgets.drawing.DrawPane;
import com.smartgwt.client.widgets.drawing.Point;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;

public class PuzzleDrawHandler implements DrawHandler {
  @Override
  public void onDraw(DrawEvent event) {
    DrawPane drawPane = (DrawPane) event.getSource();

    DrawLine line = new DrawLine();
    line.setDrawPane(drawPane);
    line.setStartPoint(new Point(0,0));
    line.setEndPoint(new Point(1000,1000));
    line.setLineWidth(3);
    line.setLineColor("#ff0000");
    line.setEndArrow(null);
    line.setStartArrow(null);
    line.draw();

    line = new DrawLine();
    line.setDrawPane(drawPane);
    line.setStartPoint(new Point(0,1000));
    line.setEndPoint(new Point(1000,0));
    line.setLineWidth(10);
    line.setLineColor("#00ff00");
    line.setEndArrow(null);
    line.setStartArrow(null);
    line.draw();
  }
}

Here is the LayoutDrawHandler:

package com._3dmathpuzzles.gwt.client;

import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.layout.Layout;

public class LayoutDrawHandler implements DrawHandler {
 @Override
 public void onDraw(DrawEvent event) {
  Layout layout = (Layout) event.getSource();
  layout.setWidth100();
  layout.setHeight100();
 }
}

[NeilAgg]

I figured it out. I changed the LayoutDrawHandler to get the size from the enclosing Element:

public void onDraw(DrawEvent event) {
Layout layout = (Layout) event.getSource();

Element element = layout.getHtmlElement();
layout.setWidth(element.getOffsetWidth());
layout.setHeight(element.getOffsetHeight());
}

[Isomorphic]

A few comments here:

1. as you can see in the docs, setHtmlElement() is designed for legacy scenarios and for integration into existing apps that use cruder technologies or provide no better integration point. It's not clear why you would be using it here; generally a green-field application would never use this API.

2. if it turns out to be appropriate to use this API, see again the docs for setHtmlElement - there are automatic size-matching behaviors like setMatchElement(), there's no need to attempt this yourself, and your solution is only partial (in several ways) as it stands

[NeilAgg]

The setMatchElement did exactly what I wanted. Thank you!