How to set a 5% margin when using RootLayoutPanel and DockPanel

Question

I've been playing around with GWT 2 and I'm finding it quite hard to get the basic page layout that I want. Basically I'm using a DocLayoutPanel where I'm adding a north (header), south (footer), west (navigation), and content area. I'd like the doc panel to take up 90% of the page and centered. That would give a nice 5% margin. However because of GWT use of top, left, right, and bottom styles it's using my normal strategies of (margin: auto) to center is not working.

How can I accomplish what I want the GWT way?

Answer 1

From reading your question it is not clear what you are asking, but I think you want the entire Dock panel to have a 5% margin?

All the new *LayoutPanels in Gwt 2.0 use css absolute positioning, which is why you are seeing the top/left/right/bottom styles. That is why you're strategy for margin:auto doesn't work.

The DockLayoutPanel is really just for layout. I would suggest adjusting the margins of the widgets that you put inside the DockLayoutPanel to achieve the effect you want.

I took a shot at this myself, and I came close to an answer but it is not perfect. I put Labels into each of the DockPanels with a margin of 10px, but the right and bottom borders do not show that margin.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"&gt;
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel>