DockLayoutPanel doesn't work properly

Question

I describe my panel in next way

<!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:DockLayoutPanel unit="PX" width="600" >
    <g:north size="85">
    ....
    </g:north>
    <g:center>
    ....

    </g:center>
</g:DockLayoutPanel>

GWT generated for north and center next divs.

 <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 85px;"
 <div style="position: absolute; overflow: hidden; left: 0px; top: 85px; right: 0px; bottom: 0px;">

They contains data that what I need, but second div doesn't displayed. Where I am wrong?

UPD: Just for example, for

    <g:center>
        <g:FlowPanel height="100%">
            <g:Label height="100%">TEST2</g:Label>
        </g:FlowPanel>
    </g:center>

I get

<div style="position: absolute; overflow: hidden; left: 0px; top: 85px; right: 0px; bottom: 0px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: 85px; right: 0px; bottom: 0px;">
    <div style="height: 100%; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
        <div class="gwt-Label" style="height: 100%;">TEST2</div>
    </div>
</div>
</div>

what are the contents of ? – Travis Webb Mar 31 '11 at 23:49 — Travis Webb, Mar 31 '11 at 23:49
@Travis, I provided some example. – Stan Kurilin Apr 01 '11 at 08:57 — Stan Kurilin, Apr 01 '11 at 08:57

score 9 · Accepted Answer · edited Apr 01 '11 at 13:32

9

I think I know what you did wrong. You need this:

RootLayoutPanel().get().add(new MyView());

instead of:

RootPanel().get().add(new MyView());

Because if you use uibinder you need the RootLayouPanel!

I hope it will help you!

edited Apr 01 '11 at 13:32

Stan Kurilin

15,614
21
81
132

answered Apr 01 '11 at 09:23

ngspkinga

421
5
16

Thanks a lot. This was what I need. I will give you bounty for this answer. – Stan Kurilin Apr 01 '11 at 09:31
I'm using RootPanel with uibinder it its working just fine. Interesting. – Travis Webb Apr 01 '11 at 12:30
2

@Travis, It seems that you need use `RootLayoutPanel` for some features of `*LayoutPanel`. RootPanel works well with _uibinder_ but not with `LayoutPanel`s. – Stan Kurilin Apr 01 '11 at 13:32
Interesting. Thanks for the info. – Travis Webb Apr 01 '11 at 14:56
Even without using UIBinder, you need to use RootLayoutPanel as long as you use any LayoutPanel components – dm76 Dec 05 '12 at 10:11

score 1 · Answer 2 · answered Sep 24 '14 at 14:03

1

I have fixed this next way:

<ui:style>
    .visible {
        overflow: visible !important;
    }
</ui:style>

<g:DockLayoutPanel unit="PX" width="100%" height="100%">
    <g:north size="46" styleName="{style.visible}">
         ...
    </g:north>
</g:DockLayoutPanel>

answered Sep 24 '14 at 14:03

Oleg Novosad

2,261
1
27
28

Thanks, it works with small modifications: - set style selector to ".visible > div" (div child of element with visible class is north element) - add styleName (or better addStyleNames) to DockLayoutPanel – gingo Dec 29 '14 at 00:28

ngspkinga · Answer 3 · 2011-04-01T07:26:46.870

0

Edit: The important thing is, what is in the center widget. Example FlowPanel will fill out the area, but VerticalPanel not. Then you have to set the height property 100%.

edited Apr 01 '11 at 07:26

answered Mar 31 '11 at 22:47

ngspkinga

421
5
16

You can see from the generated code that the second div has the correct absolute positioning. – Jason Terk Mar 31 '11 at 22:59
You are right. Sorry, I was tired earlier. I edited my comment. – ngspkinga Apr 01 '11 at 07:27

DockLayoutPanel doesn't work properly

3 Answers3