not able to see DockLayoutPanel content except header

Question

I'm trying to layout my page using DockLayoutPanel and i'm using gwt-platfrom plugin to create presenter and view pairs. when i've added the following code in my view.ui.xml i'm able to see only header part and the rest is not visible, what's wrong in my approach?

    <ui:style>        
    .eastPanel {
        background-color: #F60;
    }
    .westPanel {
        background-color: #EEE;
    }
    .northPanel {
        background-color: #39F;
    }
    .southPanel {
        background-color: #99C;
    }
    .centerPanel {
        background-color: #FFC;
    }       
</ui:style>
 <g:DockLayoutPanel unit='EM'>
   <g:north size='5'>
     <g:FlowPanel styleName="{style.northPanel}">
       <g:Label>This is the NORTH panel</g:Label>
     </g:FlowPanel>
   </g:north>
   <g:west size='15'>
     <g:FlowPanel styleName="{style.westPanel}">
       <g:Label>This is the WEST panel</g:Label>
     </g:FlowPanel>
   </g:west>
   <g:center>
     <g:FlowPanel styleName="{style.centerPanel}">
       <g:Label>This is the CENTER panel</g:Label>
     </g:FlowPanel>
   </g:center>
 </g:DockLayoutPanel>

thanks,

Answer 1

I found the reason for not revealing the page there are two mistakes while writing, 1. Use only one Unit(UM/PX/Percent) to structure all the sides of the DockLayoutPanel 2. Since I'm using gwt platform, I need to use RevealRootLayoutContentEvent.fire(this,this); in my Presenter's revealInParent() instead of RevealRootContentEvent.fire(this,this);

Answer 2

If you didn't change em anywhere, it has a default size of 16px. Therefore, 192 em can easily mean 3,072 px. I don't know how DockLayoutPanel behaves when a zone is bigger than the screen, but I am pretty sure it does not look pretty.

The other possibility is that you need to set a height of DockLayoutPanel, if it does not get it from a parent widget.

Answer 3

I face this problem before. Just set the height for your center panel. Everything will work fine.

Answer 4

You need to add the DockLayoutPanel into LayoutPanel.

LayoutPanel panel = new LayoutPanel();
panel.add(Your DockLayoutPanel);

Answer 5

I solved with this. I'm use GWTP:

<ui:style>
.eastPanel {
    background-color: #F60;
}

.westPanel {
    background-color: #EEE;
}

.northPanel {
    background-color: #39F;
}

.southPanel {
    background-color: #99C;
}

.centerPanel {
    background-color: #FFC;
}

header {
    background: red;
}
</ui:style>


<g:RootLayoutPanel>
    <g:layer>
        <g:DockLayoutPanel >
            <g:north size='60'>
                <g:FlowPanel styleName="{style.northPanel}">
                    <g:Label>This is the WEST panel</g:Label>
                </g:FlowPanel>
            </g:north>
            <g:west size='300'>
                <g:FlowPanel styleName="{style.westPanel}">
                    <g:Label>This is the WEST panel</g:Label>
                </g:FlowPanel>
            </g:west>
            <g:center>
                <g:FlowPanel styleName="{style.centerPanel}">
                    <g:Label>This is the CENTER panel</g:Label>
                </g:FlowPanel>
            </g:center>
        </g:DockLayoutPanel>
    </g:layer>
</g:RootLayoutPanel>