On Friday, May 26, 2017 at 10:32:12 PM UTC+2, Piotr Morgwai Kotarbinski wrote: > > 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) >
tl;dr: use a SimplePanel (it's OK, it's "just a div element"; actually a SimplePanel is like a FlowPanel, except its API ensures it can only contain one single Widget). For a ScrollPanel to be able to make its content scroll, it must not dictate its size. A SimpleLayoutPanel expects that its parent will give it dimensions, that it will then transfer to its inner widget (hence the div with position:relative with a div with position:absolute an left:0;top:0;width:100%;height:100%, and the gwt-Label with left:0;top:0;right:0;bottom:0). If you don't give an explicit size to the SimpleLayoutPanel, and its parent doesn't (such as when it's a ScrollPanel or a VerticalPanel), then it'll end up with a height of 0, and because of the overflow:hidden you won't see its content (the gwt-Label). -- 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+unsubscr...@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.
