TabLayoutPanel doesn't show its content

1,550 views
Skip to first unread message

mariyan nenchev

unread,
Dec 17, 2009, 9:54:54 AM12/17/09
to Google Web Toolkit
Hi,

I tried to use TabLayoutPanel, but it doesn't show its widget.
From fire bug i can see that the content of the both my tabs is overflow:hidden
I attached Web Application project(eclipse project, that uses GEP)

And here is may code:

public class TabTest implements EntryPoint {

    public void onModuleLoad() {
        RootPanel.get("test").setSize("600px", "600px");
        final TabLayoutPanel tab = new TabLayoutPanel(50, Unit.PX);
        tab.add(new HTML("asdasdssd"), "test1");
        tab.add(new HTML("asdasdssd"), "test2");
        tab.selectTab(0);

        RootPanel.get("test").add(tab);
    }
}

and my css

.gwt-TabLayoutPanelTab,.gwt-TabLayoutPanelTab-selected {
    height: 25px;
}

.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner {
    height: 26px;
    margin-left: 6px;
    background: transparent url(tab-active-right.gif) no-repeat scroll right 0;
}

.gwt-TabLayoutPanelTab {
   
}

.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner {
    margin-right: 10px;
    margin-left: 6px;
}

.gwt-TabLayoutPanelTab-selected {
    background: transparent url(tab-active-left.gif) no-repeat scroll left 0;
    z-index: 1;
}

.gwt-TabLayoutPanelTabs {
    background: transparent url(tabs-bg.png) repeat-x scroll center bottom;
    padding-left: 10px;
}

.gwt-TabLayoutPanelTabInner div {
    color: #444444;
    font-weight: bold;
    height: 26px;
    padding-top: 6px;
    text-align: center;
}

.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner div {
    background: transparent url(tab-inactive-center.png) repeat-x scroll
        center top;
}

.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner div {
    background: transparent url(tab-active-center.gif) repeat-x scroll
        center top;
    width: 100%;
    margin-left: -3px;
    margin-right: 20px;
}

.tabContentWrapper {
    margin: 35px;
}

TabTest.zip

paloalto team

unread,
Dec 17, 2009, 5:50:01 PM12/17/09
to Google Web Toolkit
Set the height of the TabLayoutPanel to something. (100%, or value-
unit)

(via class .gwt-TabLayoutPanel)

This is because the header and all child containers are absolutely
positioned.

>  TabTest.zip
> 1791KViewDownload

Satya

unread,
Jan 2, 2010, 5:26:08 PM1/2/10
to Google Web Toolkit
I am also facing this problem.
Is there any working example that uses TabLayoutPanel?

Alejandro D. Garin

unread,
Jan 2, 2010, 9:19:48 PM1/2/10
to google-we...@googlegroups.com
Hi,

Try to change
   
    RootPanel.get("test").add(tab);
by
    RootLayoutPanel.get().add(tab);



}

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Reply all
Reply to author
Forward
0 new messages