Hi, I have found the solution, it's simply the order in which you put the DockLayoutPanel cardinal directions.
Putting north, south, west, center and east in this order displayed all layout fine. Hope it help someone... On Apr 27, 8:27 pm, Daniel Bouchard <[email protected]> wrote: > Hi, > > It is my first post here and i started a new thread because the post i > was looking to reply seems to be closed (i cant see the "reply" link > at the bottom of the original post) so Ive created this one. You will > find the original post i refer to at the bottom of my current post. > > I have exactly the same problem as Marcel. All my DockLayoutPanel > rendering is fine beside of the layout of the south panel who doesn't > take 100% of the width. My south panel does start at the end of the > west border and finish at the beginning of the east border. My west > and east panel are layouted completely to the bottom of the screen. > Note that my north panel is fine and take 100% of the width. > > Here is some information about my app : > - My app is based on the GWT contact application part 2 (MVP, > AppControler, UiBinder, etc.) > - Ive replaced in the EntryPoint class RootPanel by > RootLayoutPanel so its now "appViewer.go( RootLayoutPanel.get() );" > > I'm a beginner at CSS and i strongly suspect my <ui:style> setting to > be the problem. > > Any help about this would be greatly appreciated. > > Thank you. > > Here is my HomePageView.ui.xml: > > <!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> > .mainlayout { > border-width: 3px; > border-style: solid; > border-color: orange; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : relative; > } > .north { > border-width: 3px; > border-style: solid; > border-color: red; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : absolute; > } > .west { > border-width: 3px; > border-style: solid; > border-color: blue; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : absolute; > } > .center { > border-width: 3px; > border-style: solid; > border-color: pink; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : absolute; > } > .east { > border-width: 3px; > border-style: solid; > border-color: green; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : absolute; > } > .south { > border-width: 3px; > border-style: solid; > border-color: navy; > top : 2em; > left : 2em; > right : 2em; > bottom : 2em; > width : 100%; > height : 100%; > position : absolute; > } > </ui:style> > > <g:DockLayoutPanel styleName='{style.mainlayout}' unit='EM'> > <g:north size='6' unit='EM'> > <g:FlowPanel addStyleNames="{style.north}"> > <g:Label>Header (north)</g:Label> > </g:FlowPanel> > </g:north> > <g:west size='13' unit='EM'> > <g:FlowPanel addStyleNames="{style.west}"> > <g:Label>Navigation (West)</g:Label> > </g:FlowPanel> > </g:west> > <g:center> > <g:FlowPanel addStyleNames="{style.center}"> > <g:Label>Content Area (Center)</g:Label> > </g:FlowPanel> > </g:center> > <g:east size='13' unit='EM'> > <g:FlowPanel addStyleNames="{style.east}"> > <g:Label>Pub (East)</g:Label> > </g:FlowPanel> > </g:east> > <g:south size='8' unit='EM'> > <g:FlowPanel addStyleNames="{style.south}"> > <g:Label>Bottom (South)</g:Label> > </g:FlowPanel> > </g:south> > </g:DockLayoutPanel> > </ui:UiBinder> > > The original post was: > > I have tried to use the DockLayoutPanel and the UiBinder with the > following layout: > <g:DockLayoutPanel unit='EM'> > <g:north size='5'> > <lp:HeaderArea ui:field='headerArea' /> > </g:north> > <g:west size='12'> > <lp:VerticalBar ui:field='verticalBar' /> > </g:west> > <g:south size='2'> > <lp:StatusArea ui:field='statusArea' /> > </g:south> > <g:center> > <lp:ContentArea ui:field='contentArea' /> > </g:center> > </g:DockLayoutPanel> > This should generate a four area layout. All is fine beside of the > layout the south panel. It not starts at the left window border, it > starts at the same border as the center panel and the west panel is > layouted completely to the bottom of the window. > Is this a bug, or do I somthing wrong? > Thanks, Marcel > > -- > You received this message because you are subscribed to the Google Groups > "Google Web Toolkit" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group > athttp://groups.google.com/group/google-web-toolkit?hl=en. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
