DeckLayoutPanel not displaying below banner

[Patrick May]

I have a simple GWT app with a top level UI configured in UiBinder like this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
             xmlns:g = 'urn:import:com.google.gwt.user.client.ui'>
  <g:HTMLPanel>
    <g:FlowPanel ui:field="mainApplicationWidget" styleName="main-panel">
      <g:HTMLPanel>
        <div class="banner">
          <div class="banner-text-left">
            <h3>Some H3 Text</h3>
            <h2>Some H2 Text</h2>
          </div>
        </div>
      </g:HTMLPanel>

      <g:DeckLayoutPanel ui:field="deckLayoutPanel" styleName="main-deck">
      </g:DeckLayoutPanel>
    </g:FlowPanel>
  </g:HTMLPanel>
</ui:UiBinder>
 

The CSS is:

.banner {
    float: left;
    width: 100%;
    background-image: url("images/blue-banner.jpg");
    background-size: 100%;
}
.banner h2 {
    font-size:  60px;
    font-family: "Helvetica Neue", "Arial", "Helvetica";
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 3px #000;
    margin-top: 3px;
    text-align: right;
}
.banner h3 {
    font-family: "Helvetica Neue", "Arial", "Helvetica";
    margin: 20px 0px 0px 0px;
    color: #fff;
    font-size: 30px;
    text-align: right;
}
.banner-text-left {
    float: left;
    text-align: left;
    margin-left: 20px;
}

.main-deck {
    width: 100%;
}
 

The code inserts this simple panel into the DeckLayoutView:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
             xmlns:g = 'urn:import:com.google.gwt.user.client.ui'>
  <g:HTMLPanel>
    <center>
      <h1>Test Placeholder</h1>
      <g:Label ui:field="testLabel" text="Test"/>
    </center>
  </g:HTMLPanel>
</ui:UiBinder>
 

When I run the app in devmode, I see the banner and the two text strings, but no DeckLayoutView. How do I get that to appear?

[Thomas Broyer]

See http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#Resize

Layout panels are sized from the outside-in; your DeckLayoutPanel needs to be given explicit dimensions.

Alternatively, replace your HTMLPanel and FlowPanel with layout panels (e.g. a HeaderPanel) and add it to the RootLayoutPanel (rather than the LayoutPanel). If your UiBinder is used in a composite widget, make sure it extends ResizeComposite rather than Composite.