Problem using TabPanel, only first tab is displaying correctly

[fcomte]

Hi,

I'm testing GXT 3.0.0b and building a sample app.
When nesting ContentPanel inside a TabPanel, i'm facing the following problem : the first tab is always displaying correctly but the content of the following tabs is not correct (only a part of the button is visible or the whole content is missing).

Here is the screenshot gxt_problem.jpg

And the source code of the example :

public class Application implements EntryPoint {

    public void onModuleLoad() {


        BorderLayoutContainer mainContainer = new BorderLayoutContainer();


        TabPanel mainTabPanel = new TabPanel();


        BorderLayoutData centerData = new BorderLayoutData();
        centerData.setMargins(new Margins(5));


        VerticalLayoutContainer mainContent = new VerticalLayoutContainer();
        mainContent.add(mainTabPanel, new VerticalLayoutData(1, 1));


        mainContainer.setCenterWidget(mainContent, centerData);


        mainTabPanel.setBodyBorder(false);
        mainTabPanel.setResizeTabs(true);
        mainTabPanel.setTabWidth(Integer.MAX_VALUE);


        VerticalLayoutContainer contentPanel1Container = new VerticalLayoutContainer();
        ContentPanel contentPanel1 = new ContentPanel();
        contentPanel1.setPixelSize(500, 250);
        contentPanel1.addButton(new TextButton("Submit 1"));
        contentPanel1Container.add(contentPanel1);


        VerticalLayoutContainer contentPanel2Container = new VerticalLayoutContainer();
        ContentPanel contentPanel2 = new ContentPanel();
        contentPanel2.setPixelSize(500, 250);
        contentPanel2.addButton(new TextButton("Submit 2"));
        contentPanel2Container.add(contentPanel2);


        mainTabPanel.add(contentPanel1Container, "Tab 1");
        mainTabPanel.add(contentPanel2Container, "Tab 2");


        Viewport viewport = new Viewport();
        viewport.add(mainContainer);


        RootPanel.get().add(viewport);
    }
}

Is it possible to use a content panel inside a tab panel? Should I use another container?

[sword-it]

Hi fcomte,


I guess you need re-layout your panel on tab change for this you can call forceLayout() method on tabpanel change something like that .
for more info see http://stackoverflow.com/questions/4...in-ext-gwt-gxt

[zrk9k37m1]

Hi, I also have the same issue.
My workaround was to readd the invisible tab :

 TabPanel folder = new TabPanel();
    public void onModuleLoad() {
//firstTab framedPanel
        final CampaignEditor campaignEditor=new CampaignEditor();
//secondTab  
      final ImportEditor importEditor=new ImportEditor();
        folder.add(campaignEditor.asWidget(),new TabItemConfig("Campaigns"));
        folder.add(importEditor.asWidget(),new TabItemConfig("Imports",false));
        RootPanel.get().add(folder);


        folder.addSelectionHandler(new SelectionHandler<Widget>() {
            @Override
            public void onSelection(SelectionEvent<Widget> event) {
          FramedPanel w=(FramedPanel)event.getSelectedItem();
                w.forceLayout();
                if(w.equals(importEditor.asWidget())&&!imports_redrawed)
                {
                    ((FramedPanel) importEditor.asWidget()).forceLayout();
                    folder.remove(w);
                    imports_redrawed=true;
                    folder.add(importEditor.asWidget(),new TabItemConfig("Imports", false));
                }






                folder.setActiveWidget(w);
            }
        });


    }
    boolean imports_redrawed=false;
}

[jongraf]

Calling tabPanel.forceLayout() solved this issue for me!