DockLayoutPanel inside a FormPanel

[julien.dram...@gmail.com]

Hello all,

I try to do something like that in a ui.ml file :

<!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"

        <g:FormPanel ui:field="formPanel">
                <g:DockLayoutPanel unit='EM'>
                        <g:north size='15'>
                             ..widget
                        </g:north>
                        <g:center>
                            ..widget
                        </g:center>
                        <g:south size='5'>
                        ..widget
                        </g:south>
                </g:DockLayoutPanel>
        </g:FormPanel>
</ui:UiBinder>

I try to encapsulate a dockLayoutPanel inside a form panel. Indeed, I
have a complicated form to submit and I want to use a DockLayoutPanel
to layout it.

But the center and south part of the docklayoutpanel will become
invisible.

Indeed, the DockLayoutPanel create an html like this one :

<div style="position: relative;">
        <div style="position: absolute; z-index: -32767; left: -20em; top:
-20ex; width: 10em; height: 10ex;"> </div>
        <div style="overflow: hidden; position: absolute; left: 0px; top:
0px; right: 0px; bottom: 0px;">
                <div style="position: absolute; left: 0px; top: 0px; right: 0px;
bottom: 0px;">
                        <div style="position: absolute; z-index: -32767; left: 
-20em; top:
-20ex; width: 10em; height: 10ex;"> </div>
                        <div style="overflow: hidden; position: absolute; left: 
0em; top:
0em; right: 0em; height: 15em;">
                                <div style="position: absolute; left: 0px; top: 
0px; right: 0px;
bottom: 0px;">
                                        .. north widgets
                                </div>
                        </div>
                        <div style="overflow: hidden; position: absolute; left: 
0em; right:
0em; bottom: 0em; height: 5em;">
                                <div style="position: absolute; left: 0px; top: 
0px; right: 0px;
bottom: 0px;">
                                        ..south widgets
                                </div>
                        </div>
                        <div style="overflow: hidden; position: absolute; left: 
0em; top:
15em; right: 0em; bottom: 5em;">
                                <div style="position: absolute; left: 0px; top: 
0px; right: 0px;
bottom: 0px;">
                                .. center widget
                                </div>
                        </div>
                </div>
        </div>
</div>

The first <div style="position: relative;"> breaks the layout... If I
specify a height to this div, or if I remove "position: relativ" or if
I remove the "overflow:hidden" of the north and south main div, that's
works fine.

If the dockLayoutpanel is not encapsulated by the form panel the first
<div style="position: relative;"> is not present and the
docklayoutpanel is right displayed.

Suggestions ? Problem on my side or on GWT side ?

Thanks,

Julien

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.