GWT: TabLayoutPanel with custom tabs does not display correctly

Question

I have a TabLayoutPanel where I am putting custom widgets in for the tabs to be able to display some images next to the text. I originally worked with TabPanel and using custom HTML for the tab text, but custom tab widgets allows me to modify the image on the fly as needed.

My tab widget is essentially a HorizontalPanel, a number of small images, and a line of text. The problem I'm having is that the tab doesn't want to stick to the bottom of the tab bar like normal. The tab is getting positioned at the top of the space reserved for the tab bar, and there's a gap between it and the bottom of the tab bar. I uploaded an image of the problem to http://imgur.com/fkSHd.jpg.

Is there some style that I need to apply to custom widget tabs to make them appear correctly?

Answer 1

In my brief experience, the newer standards mode panels (they all end in "LayoutPanel") don't get along with the older ones (the ones that just end in "Panel"). So you might consider trying a DockLayoutPanel instead of the HorizontalPanel, and it may be more cooperative.

See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels, particularly the section called "What won't work in Standards Mode?":

HorizontalPanel is a bit trickier. In some cases, you can simply replace it with a DockLayoutPanel, but that requires that you specify its childrens' widths explicitly. The most common alternative is to use FlowPanel, and to use the float: left; CSS property on its children. And of course, you can continue to use HorizontalPanel itself, as long as you take the caveats above into account.

Answer 2

After a bit more research, I found the answer here: https://groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJ. I had to use InlineLabel or InlineHTML widgets instead of normal Label or HTML widgets. I've tested this solution and it does exactly what I want. I pasted the code of the class below for completeness. Note two things here:

1. The "float" attribute cannot be set on the last element (the InlineLabel) or the incorrect drawing condition occurs again.

2. The code could be cleaned up a bit further by having the class extend directly from FlowPanel instead of making it a composite containing a FlowPanel.

   package com.whatever;
   
   import com.google.gwt.core.client.GWT;
   import com.google.gwt.dom.client.Style.Float;
   import com.google.gwt.dom.client.Style.Unit;
   import com.google.gwt.resources.client.ClientBundle;
   import com.google.gwt.resources.client.ImageResource;
   import com.google.gwt.user.client.ui.Composite;
   import com.google.gwt.user.client.ui.FlowPanel;
   import com.google.gwt.user.client.ui.Image;
   import com.google.gwt.user.client.ui.InlineLabel;
   
   public class StatusTab extends Composite
   {
      public interface StatusImages extends ClientBundle
      {
         public static StatusImages instance = GWT.create(StatusImages.class);
   
         @Source("images/status-green.png")
         ImageResource green();
   
         @Source("images/status-red.png")
         ImageResource red();
      }
   
      private final ImageResource greenImage;
      private final ImageResource redImage;
   
      private final FlowPanel flowPanel;
   
      public LinkStatusTab(String text, int numStatuses) {
   
         greenImage = StatusImages.instance.green();
         redImage = StatusImages.instance.red();
   
         flowPanel = new FlowPanel();
         initWidget(flowPanel);
   
         for (int i = 0; i < numStatuses; i++)
         {
            Image statusImg = new Image(redImage);
            statusImg.getElement().getStyle().setMarginRight(3, Unit.PX);
            statusImg.getElement().getStyle().setFloat(Float.LEFT);
            flowPanel.add(statusImg);
         }
   
         flowPanel.add(new InlineLabel(text));
      }
   
      /**
       * Sets the image displayed for a specific status entry.
       */
      public void setStatus(int which, boolean status)
      {
         Image image = (Image)flowPanel.getWidget(which);
         if (status)
            image.setResource(greenImage);
         else
            image.setResource(redImage);
      }
   }