GWT docklayoutpanel - fill out center panel with padding

Question

I'm currently developing a base layout for a website. I'm using a docklayoutpanel for the different areas (top - breadcrumbs, left - navigationbar, right - contentbar).
The idea is, that the website fills out all available screen area. I've added panels to the different areas (north, west, center) in order to add widgets later on.
The panels also have a padding of 0.5em.
The problem is that the padding isn't working for the right side of the content area.

Here's a picture:

Here's the xml code:

<!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">
<ui:style>       
        .dockLayout {
            border: black solid 1px;
            margin: 0.5em;
        }
        .breadcrumbsPanel {
            border-bottom: black solid 1px;
            width:  auto;
            height: auto;
            background-color: #ffffff;
        }
        .navigationPanel {
            border-right: black solid 1px;
            width:  100%;
            height: 100%;   
            background-color: #ffffff;  
            padding: 0.5em;
        }
        .contentPanel {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            padding: 0.5em;
        }
        .testPanel {
            background-color: #ffffff;
            border: black solid 1px;
        }
    </ui:style>
         <g:DockLayoutPanel styleName="{style.dockLayout}" unit='EM' height="100%">
           <g:north size='3'>
            <g:SimplePanel styleName="{style.breadcrumbsPanel}" ui:field='breadcrumbsPanel'></g:SimplePanel>
           </g:north>
           <g:west size='20'>
            <g:VerticalPanel styleName="{style.navigationPanel}" ui:field='navigationPanel' height="100%">
            </g:VerticalPanel>
           </g:west>
           <g:center size='76'>
            <g:ScrollPanel styleName="{style.contentPanel}" ui:field='contentPanel'>
                <g:FlowPanel styleName="{style.testPanel}">
                    <g:Label>content</g:Label>
                </g:FlowPanel>
            </g:ScrollPanel>
           </g:center>     
         </g:DockLayoutPanel>
</ui:UiBinder>

apanizo apanizo · Accepted Answer · 2014-05-05T09:14:39

I think is more a CSS issue than other thing. Probably if you change your .contentPanel for something like:

.contentPanel {
  position: relative;
  left:0.5em;
  right: 0.5em;
  top: 0;
  bottom: 0;
  background-color: #ffffff;
}

Should work.

GWT docklayoutpanel - fill out center panel with padding

1 Answers