TextButton inside a ContentPanel has unwanted top margin in IE

[deepfriedbrain]

I noticed that in IE 8, when I place a TextButton inside a Content Panel, it has unwanted top margin. It works fine in Chrome and FF though. I'm posted a standalone test case and screenshot below. I'm using GXT v3.0.1.

package com.hello.gxt.client; 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
 
public class HelloGXT implements IsWidget, EntryPoint {
 
  private ContentPanel root;
 
  @Override
  public Widget asWidget() {
    if (root == null) {
 
      root = new ContentPanel();
      root.setHeaderVisible(false);
      root.setPixelSize(200, 100);
       
      TextButton btn = new TextButton("Test Button");
      
      VerticalLayoutContainer con = new VerticalLayoutContainer();     
      con.add(btn, new VerticalLayoutData(-1, -1));
      root.setWidget(con);
    }
 
    return root;
  }
 
  @Override
  public void onModuleLoad() {
    RootPanel.get().add(asWidget());
  }
}

Sencha_GXT_TextButton_ContentPanel.jpg

[flyingbo]

We have the same problem in IE 8. IE 9 works.

Used versions 3.0.3 and 3.0.4-Nightly-Build

[Colin Alworth]

Thanks for the report - I can reproduce this in IE8, and have filed it internally.

deepfriedbrain, from the extra padding around the ContentPanel, it appears you have either not added the reset.css to your html page (as described in setup.txt), or you have the GWT Clean theme added in your module file. The Clean theme adds padding in several areas where GXT expects there to be none, and can prevent certain things like the Viewport from behaving correctly. This does not effect the bug - it happens with or without it. That said, it makes this simplified bug harder to notice correctly.

Here's a simplified test that clearly shows that the TextButton is at fault, and that the ContentPanel (and VLC) is just a red herring:

public class Test implements EntryPoint {
  @Override
  public void onModuleLoad() {
    RootPanel.get().add(new TextButton("test"));
  }
}

screenshot18.png

[flyingbo]

I use ToggleButton. Don´t know if it is important for your fix.

[Colin Alworth]

It probably won't make any difference - ToggleButton appears to only add different behavior to TextButton, not new rendering - but any additional context/details are always nice to have.

[flyingbo]

Hello,

maybe it helps:

btn.getElement().getStyle().setDisplay(Display.BLOCK); is my workaround...

A button receives the display:inline-block css-property but i could not find this property in ButtonCell.css to overwrite it.