great, many thanks for your help! :)
On Saturday, May 27, 2017 at 4:19:13 PM UTC+7, Thomas Broyer wrote: > > > > 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.
