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 google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.
No comments:
Post a Comment