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 [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.
