How do I center widgets in a DeckLayoutPanel within a DockLayoutPanel

0
votes

My top level UI looks 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:FlowPanel>
    <g:DockLayoutPanel ui:field="mainApplicationWidget"
                       styleName="ui-main-panel">
      <g:north size="200">
        <g:HTMLPanel>
          <div class="banner">
            <div class="banner-text-left">
              <h3>Descriptive Text</h3>
              <h2>Title</h2>
            </div>
          </div>
        </g:HTMLPanel>
      </g:north>

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

When I put an HTMLPanel in the DeckLayoutPanel, I can use the HTML center tag to center my content. When I add any other widget, it ends up flush left. I've tried wrapping both the DockLayoutPanel and the DeckLayoutPanel like this:

<g:VerticalPanel spacing="0" width="100%" height="100%" ui:field="mainPanel">
    <g:Cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
    <!-- content goes here -->
    </g:Cell>
</g:VerticalPanel>

based on an answer to a similar question, but that doesn't work.

As an example, one of my widgets is a FlowPanel containing a Grid. How would I get that centered horizontally in the center cell of the DockLayoutPanel after adding it to the DeckLayoutPanel?

1
gwtuibinder

1 Answers

0
votes

The solution is to change the enclosed widget to be a VerticalPanel with 100% width and height, and wrap the Grid in a Cell with horizontalAlignment set as described above.