Vertically align to top for CanvasItem Canvas

[kevboy]

I have a Canvas containing a grid along with a modify button. The grid could be a ListGrid or a TreeGrid. If it's a TreeGrid, then we attach labels at the bottom to expand or collapse all.

The issue I'm having is vertically aligning the grids to the top of their respective Canvases. You can see what I have so far in the attached image (labels have be obfuscated for proprietary purposes and borders added with different colors to show different Canvases). The red Canvas is the main Canvas that I pass to the CanvasItem. You can see that the ListGrid on the right is vertically aligned center but we want it to be aligned to the top.

This is how I coded it:

private static CanvasItem createCanvasItem(String title, com.smartgwt.client.widgets.grid.ListGrid grid, IButton modifyButton) {
    VLayout listLayout = new VLayout(grid);
    listLayout.setAlign(VerticalAlignment.TOP);
    listLayout.setLayoutAlign(VerticalAlignment.TOP);
    listLayout.setAutoWidth();
    listLayout.setBorder("1px solid green");
    
    if (grid instanceof TreeGrid) {
        listLayout.addMember(createExpandCollapseCanvas((TreeGrid)grid));
    }
    listLayout.addMember(new LayoutSpacer());

    HLayout canvas = new HLayout(listLayout, modifyButton);
    canvas.setMembersMargin(6);
    canvas.setAlign(VerticalAlignment.TOP);
    canvas.setLayoutAlign(VerticalAlignment.TOP);
    canvas.setBorder("1px solid red");
    
    CanvasItem canvasItem = new CanvasItem(title, canvas);
    canvasItem.setTitleVAlign(VerticalAlignment.TOP);
    return canvasItem;
}

Here's how I added it:

DynamicForm form = new DynamicForm();
form.setBorder("1px solid blue");
form.setNumCols(4);
form.setItems(
        levelItem,
        createCanvasItem("Canvas 1", list1, createModifyButton()),
        createCanvasItem("Canvas 2", list2, createModifyButton()));

Any help is greatly appreciated. Thanks!

[Isomorphic]

It's really easy to figure this kind of thing out using the Watch Tab and Firebug. In this case you'll find either that you've set the size of the CanvasItem too small or that there is CSS styling such as padding around the CanvasItem (revealed by Firebug, which will also tell you the name of the style and file it is from).

[kevboy]

Thanks! Used the Watch tab to find the height of the left CanvasItem and called CanvasItem.setHeight() on the right one for them to match.