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 at
http://groups.google.com/group/google-web-toolkit?hl=en.
