TabLayoutPanel inside HeaderPanel - tab body doesn't show

[James Scott]

I'm updating a module originally done in GWT 1.7 to GWT 2.4, and I'm
having a problem with a TabLayoutPanel inside a HeaderPanel. When I
add the TabLayoutPanel to the content area of the HeaderPanel, the tab
content does not appear. Inspecting the HTML shows that the tab
content divs have 0 height.

I think this is a bug, and that's a serious bummer. HeaderPanel sounds
like exactly what we need to replace the Rube Goldberg resize listener
stuff we had to do in a composite using the old widgets.
DockLayoutPanel appears to work OK with TabPanel, but isn't suitable
for this application because we have some resizable elements in the
header area. HeaderPanel handles those just fine...but the main
content of the page doesn't display due to this apparent problem with
TabLayoutPanel.

Am I missing something?

JLS

[Thomas Broyer]

See http://code.google.com/p/google-web-toolkit/issues/detail?id=7065

[James Scott]

I've applied the patch from the code review referenced in comment 3 on
issue 7065, and it didn't fix the bug. I verified that the
DeckLayoutPanel.onLoad() method implementation added by the patch gets
called, but the tab body is still not rendered when the TabLayoutPanel
is contained in a HeaderPanel.

Even worse, applying the full patch from http://gwt-code-reviews.appspot.com/1601804/
(which also changes Layout/LayoutImpl/LayoutImplIE6) causes IE7 to
render a blank page - using dev tools to inspect the DOM shows that
the elements are there but with size 0x0.

I very well might be doing something wrong (this is my first time
building GWT from source) but it doesn't look like the patch addresses
the issue.

JLS


On Jan 4, 5:14 am, Thomas Broyer <t.bro...@gmail.com> wrote:
> Seehttp://code.google.com/p/google-web-toolkit/issues/detail?id=7065

[Thomas Broyer]

I've read a few times people complaining about HeaderPanel. Have you tried putting a ResizeLayoutPanel between the HeaderPanel and your TabLayoutPanel? It shouldn't be necessary, but there might be a bug in HeaderPanel.

Also, out of curiosity, is your HeaderPanel in a ProvidesResize widget? (up to a RootLayoutPanel or a panel with an explicit size in pixels)

[James Scott]

Wrapping the TabLayoutPanel in a ResizeLayoutPanel, and then adding
the RLP as the content widget of the HeaderPanel, resulted in nothing
rendering in the content area.

Here's my test code for my original case - I'm adding the HeaderPanel
directly to the RootLayoutPanel.

public class TestHeaderEntryPoint implements EntryPoint {

@Override
public void onModuleLoad() {
HeaderPanel hp = new HeaderPanel();
TabLayoutPanel tp = new TabLayoutPanel(3, Unit.EM);
tp.add(new Label("This is tab 1"), "tab 1");
tp.add(new Label("This is tab 2"), "tab 2");
hp.setHeaderWidget(new Label("this is the header"));
hp.setContentWidget(tp);
hp.setFooterWidget(new Label("this is the footer"));
RootLayoutPanel.get().add(hp);
}
}

When I set a breakpoint in HeaderPanel.forceLayout I see that
remainingHeight is > 0 and (content instanceof RequiresResize) is
true, so I see content.onResize() get called...the tabs display, but
the tab body doesn't.

Possibly interesting aside: When I declared the HeaderPanel and
TabLayoutPanel in a UiBinder .ui.xml, I saw that content ended up as
type FlowPanel, so HeaderPanel.forceLayout didn't call
content.onResize(). But the effect was the same - tabs display, but
tab bodies don't.


JLS

[Neil]

I have seen a bug with tab layouts and EM sizing in IE8. When I
switch from Unit.EM to Unit.PX it worked.

TabLayoutPanel tp = new TabLayoutPanel(40, Unit.PX);

Unix.EM worked in Chrome, but apparently at the time calculations are
done in IE, the height is still 0.

Also, the HeaderPanel is not a Layout Panel, and that will cause
issues (I could never get a tab panel to have a height of 100% when
place in a non-layout panel. Try looking at the DocLayoutPanel
instead.

-Neil

[Thomas Broyer]

On Sunday, January 15, 2012 7:42:52 PM UTC+1, Neil wrote:

Also, the HeaderPanel is not a Layout Panel, and that will cause
issues (I could never get a tab panel to have a height of 100% when
place in a non-layout panel.

Yes it is. It's a RequiresResize. It doesn't implement ProvidesResize because it doesn't resize its header and footer widgets, but it will resize the center widget.

As for TabLayoutPanel, as I already mentionned above, there's a bug in DeckLayoutPanel (which it uses): issue 7065.

[Loo Bin Hooi]

I've tried adding height="100%" and width="100%" to the <g:TabLayoutPanel>, that seems to be working. 

From the GWT Javadoc itself, HeaderPanel should resize its content. 

My quick guess was the content widget itself doesn't mention how much "%" in this case it should occupy. 

Had a quick test, it seem to be working for me.