GWT Grid is not appearing with uiBinder

I have a 2 by 2 Grid in a project which is initialised using uiBuilder, however, the grid never appears on the page. The title and subheading appear fine. I've been struggling with this for days. Any advice is very much appreciated (this is my first gwt project). Thank you!

There are 3 files: Test.java, TaskSelect.java and TaskSelect.ui.xml

*Test.java***

package org.client;  
    import com.google.gwt.core.client.*;  
    import com.google.gwt.user.client.ui.*;

    public class Test extends DeckPanel implements EntryPoint 
    {

    public void onModuleLoad()
    {
        Test t = new Test();
    TaskSelect taskselect = new TaskSelect();
    t.add(taskselect);
    t.showWidget(0);
        RootPanel.get().clear();
        RootPanel.get().add(t);
    }
}

*TaskSelect.java**

package org.client;

    import com.google.gwt.user.client.ui.*;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.uibinder.client.*;

    public class TaskSelect extends Composite {
    interface Binder extends UiBinder<Widget, TaskSelect> { }
    private static final Binder binder = GWT.create(Binder.class);
    @UiField Button buttonA;
    @UiField Button buttonB;
    @UiField Button buttonC;
    @UiField Button buttonD;
    @UiField Grid mygrid;

    public TaskSelect() {
        initWidget(binder.createAndBindUi(this));
    }
}

*TaskSelect.ui.xml**

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>
    .bigbutton {
    font-size: 24pt;
    width: 300px;
    height: 95px;
    }

    .h1 {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin: auto;
    }

    .subheading {
    font-size: 24pt;
    text-align: center;
    margin: auto;
    }

    .panel {
    margin: auto;
    }
    </ui:style>
   开发者_如何学JAVA   <g:DockLayoutPanel unit='EM' addStyleNames='{style.panel}'>
    <g:north size='10'>
      <g:VerticalPanel addStyleNames='{style.panel}'>
        <g:Label addStyleNames='{style.h1}'>Title is here</g:Label>
        <g:Label addStyleNames='{style.subheading}'>Sub heading</g:Label>
      </g:VerticalPanel>
    </g:north>
    <g:center size='10'>
      <g:Grid ui:field='mygrid' addStyleNames='{style.panel}' cellSpacing='50'>
        <g:row>
          <g:customCell>
            <g:Button ui:field='buttonA'>Button A</g:Button>
          </g:customCell>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button B' ui:field='buttonB' />
          </g:customCell>
        </g:row>
        <g:row>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button C' ui:field='buttonC' />
          </g:customCell>
          <g:customCell>
            <g:Button addStyleNames='{style.bigbutton}' text='Button D' ui:field='buttonD' />
          </g:customCell>
        </g:row>
      </g:Grid>
    </g:center>
  </g:DockLayoutPanel>
</ui:UiBinder>

---

The height/width of the grid is set by the DockLayoutPanel as DockLayoutPanel automatically scales to fill the whole area. Check the documentation on the Layout widgets and see if you need DockLayoutPanel or DockPanel.

Anyway adding this to the .panel style should make it work:

height:100%;

Yes, it doesn't sound logical...

-edit-

And use RootLayoutPanel.get() instead of RootPanel.get(). This because you use a LayoutPanel.