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

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);
      }
   }