2

I am trying to use a TabLayoutPanel and it seems to be working fine when it is the first thing I put on the page, but when I do it after a button push (for example) it is not displaying properly. For example, if I do something like this it works fine:

TabLayoutPanel tlp = new TabLayoutPanel(2.5, Style.Unit.EM);

tlp.add(new HTML("Tab1"), "Tab 1 title");
tlp.add(new HTML("Tab2"), "Tab 2 title");
tlp.add(new HTML("Tab3"), "Tab 3 title");
tlp.setPixelSize(500, 400);

RootLayoutPanel.get().add(tlp);

However, if I do something like the following, when I click the button all I see displayed is "Tab1", no other tabs, no "Tab 1 title", etc.:

HorizontalPanel hp = new HorizontalPanel();
Button btn = new Button("push");
TabLayoutPanel tlp = new TabLayoutPanel(2.5, Style.Unit.EM);

hp.add(btn);
tlp.add(new HTML("Tab1"), "Tab 1 title");
tlp.add(new HTML("Tab2"), "Tab 2 title");
tlp.add(new HTML("Tab3"), "Tab 3 title");
tlp.setPixelSize(500, 400);

RootLayoutPanel.get().add(tlp);

btn.addClickHandler(new ClickHandler() {
   public void onClick(ClickEvent event) {

      RootLayoutPanel.get().remove(hp);
      RootLayoutPanel.get().add(tlp);
   }
});

Any ideas? I read somewhere that there are problems with TabLayoutPanel in IE8, which I'm using, but since it displays okay in the first case I doubt that's the issue. I wanted to see what would happen with Chrome and Firefox, but spent a couple hours struggling to install the GWT Developer Plugin on those browsers without any luck.

Is there something inherently wrong with what I'm trying to do? Does anyone see something wrong with my code? Can anyone suggest how to debug this?

nalply
  • 26,770
  • 15
  • 78
  • 101
mgcl
  • 21
  • 4
  • I ended up using a a TabPanel instead and that solved my problem. I'm still not sure why TabLayoutPanel didn't work. – mgcl Jun 20 '13 at 22:04

1 Answers1

0

Your solution for the second implementation issue would be the following:

    final HorizontalPanel hp = new HorizontalPanel();
    Button btn = new Button("push");
    final TabLayoutPanel tlp = new TabLayoutPanel(2.5,Style.Unit.EM);

    hp.add(btn);
    tlp.add(new HTML("Tab1"), "Tab 1 title");
    tlp.add(new HTML("Tab2"), "Tab 2 title");
    tlp.add(new HTML("Tab3"), "Tab 3 title");
    tlp.setPixelSize(500, 400);

    RootLayoutPanel.get().add(hp);

    btn.addClickHandler(new ClickHandler(){

        @Override
        public void onClick(ClickEvent event) {

            RootLayoutPanel.get().remove(hp);
            RootLayoutPanel.get().add(tlp);             
        }

    });

Your mistake was the order in which you attached/detached the widgets to/from the RootLayoutPanel.