Hey all,
I have the following code:
uiBinder ui.xml template:
<!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:ScrollPanel>
<g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel>
</g:ScrollPanel>
</ui:UiBinder>
uiBinder java class:
public class TestLayout extends Composite {
interface ViewUiBinder extends UiBinder<Widget, TestLayout> {}
private static ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class);
public TestLayout() { initWidget(uiBinder.createAndBindUi(this)); }
}
entryPoint:
public void onModuleLoad() { RootLayoutPanel.get().add(new TestLayout()); }
...and it renders to an empty page :(
the exact resulting html is like this: (copied from chrome's dom inspector,
formatting mine)
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="Gwt/Gwt.nocache.js"></script>
<link rel="stylesheet" href=
"http://localhost:8088/Gwt/gwt/standard/standard.css">
<script src=
"http://localhost:8088/Gwt/7ED5A073690437962C6F98112D263AB9.cache.js"
></script>
</head>
<body>
<iframe src='javascript:""' id="Gwt" tabindex="-1" style="position: absolute
; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;"
></iframe>
<div aria-hidden="true" style="position: absolute; z-index: -32767; top: -
20cm; width: 10cm; height: 10cm; visibility: hidden;"> </div>
<div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px
;">
<div aria-hidden="true" style="position: absolute; z-index: -32767; top: -
20ex; width: 10em; height: 10ex; visibility: hidden;"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px;
right: 0px; bottom: 0px;">
<div style="overflow: auto; position: absolute; zoom: 1; left: 0px; top:
0px; right: 0px; bottom: 0px;">
<div style="position: relative; zoom: 1;">
<div style="position: relative;">
<div aria-hidden="true" style="position: absolute; z-index: -32767
; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div>
<div style="position: absolute; overflow: hidden; left: 0px; top:
0px; width: 100%; height: 100%;">
<div class="gwt-Label" style="position: absolute; left: 0px; top
: 0px; right: 0px; bottom: 0px;">AAA</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
notice the "position: absolute;" in the style of the 2 inner-most div
elements surrounding "AAA" : if I change them manually to "position:
relative;" inside chrome's dom inspector then it renders ok.
moreover, if I just replace the SimpleLayoutPanel with a SimplePanel in the
ui.xml file, it all renders fine in spite of still using a RootLayoutPanel
(not a RootPanel) in my EntryPoint... :?
I've also noticed that similar problem appears when I try to put a
SimpleLayoutPanel inside a VerticalPanel:
<!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:VerticalPanel>
<g:SimpleLayoutPanel><g:Label>AAA</g:Label></g:SimpleLayoutPanel>
<g:SimpleLayoutPanel><g:Label>BBB</g:Label></g:SimpleLayoutPanel>
</g:VerticalPanel>
</ui:UiBinder>
...because of very similar reasons: the 2 inner-most div elements around
both "AAA" and "BBB" will have "position: absolute;" in their style. Again,
replacing it manually for "position: relative;" makes it render ok and
replacing the SimpleLayoutPanel with a SimplePanel makes it all work ok.
Is it a bug or am I missing something? If it's expected then what Panel
should I use instead of a SimpleLayoutPanel as a placeholder inside a
ScrollPanel or a VerticalPanel when using layout Panels in general? (a
SimplePanel works, but it's not a layout Panel, so I guess I should not
rely that it will work under all possible circumstances and I guess I
should be using some layout Panel instead)
I would be grateful for any feedback or advice :)
Thanks!
--
You received this message because you are subscribed to the Google Groups "GWT
Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.