Inner TabLayoutPanel content not visible

Question

All, I want a tab menu pane that lives inside my main ScrollPanel. Everytime a user clicks a menu option from my main page the centre ScrollPanel removes whatever widgit was there before and adds a new one.

Its worked fine so far that is until i introduced a TabLayoutPanel. As you guessed it the TabLayout only shows the tabs and not the content which has no size and yes i want it at 100% width and height.

Ive seen this all over the interweb and the solution is to attached it to the RoolLayoutPanel because the TabLayoutPanel is set to absolute however that doesnt work for me because i dont want to attach it to the root layout rather this inner client area/ ScrollPanel.

All i want is a tabbed system so if TabLayoutPanel is not the best choice then does anyone recommend another? Im in standards mode as i assume that i should be building against this for better browser compatibility.

here is my page structure:

RootLayoutPanel rootPanel = RootLayoutPanel.get();
rootPanel.setSize("940px", "940px");

mainpanel = new FlowPanel();
mainpanel.setSize("100%", "100%");
rootPanel.add(mainpanel);

header = new FlowPanel();
mainpanel.add(header);

ScrollPanel mainbody = new ScrollPanel();
mainpanel.add(mainbody);

footer = new FlowPanel();
mainpanel.add(footer);

And whenever i want to change the content of mainbody i call:

mainbody.clear()
mainbody.add(..)

Any help would be appreciated, Thanks

score 0 · Answer 1 · edited Sep 26 '12 at 11:07

My solution:

use RootLayoutPanel instead of RootPanel

public void onModuleLoad() {
    binwebtabs bwt = new binwebtabs();
    //RootPanel.get("mainpage").add(bwt);

    RootLayoutPanel rp = RootLayoutPanel.get();
    rp.add(bwt);
}

use g:LayoutPanel at the root of the uibinder XML, then u can add any widget (e.g. lable) and the g:TabLayoutPanel under separate g:layer

<g:LayoutPanel>
<g:layer>
  <g:Label>Bin Web </g:Label>
</g:layer>
<g:layer>
<g:TabLayoutPanel ui:field="tabLayoutPanel" barUnit="PX" barHeight="60">
... 
</g:TabLayoutPanel>

This way the g:TabLayoutPanel content is visible and the g:TabLayoutPanel doesnt have tobe at the root.

score 0 · Answer 2 · answered May 25 '11 at 09:52

I'm not sure if I get what you are up to. But how about using a DeckLayoutPanel? The DeckLayoutPanel holds a 'deck' with multiple widgets and displays one of them at a time. You can even have sliding animation while transitions.

http://google-web-toolkit.googlecode.com/svn/javadoc/2.3/com/google/gwt/user/client/ui/DeckLayoutPanel.html

Inner TabLayoutPanel content not visible

2 Answers2