View Full Version : unexpected results with TabItemConfig.setHTML(String html)

25 Apr 2012, 10:00 AM
Hello Everyone,

I need to render custom content in a tab for the TabPanel. After looking through the docs, it looks like I could get what I need by using the setHTML method on a TabItemConfig. However, the results I'm getting is no different than using the setText method (IE. the markup is rendered as text).

public class Main implements EntryPoint
public void onModuleLoad()
TabPanel folder = new TabPanel();

HTML content = null;
TabItemConfig config = null;

content = new HTML("Hello World!");
config = new TabItemConfig();
config.setHTML("<h4>Tab 1</h4>");
folder.add(content, config);

content = new HTML("Goodby World!");
config = new TabItemConfig();
config.setHTML("<h4>Tab 2</h4>");
folder.add(content, config);



Am I doing something wrong here, or is this the expected result? If the later, what would be the best way to go about adding "advanced" content to a tab?

Thanks for your time!

4 Jul 2012, 5:33 AM

Same problem on gxt 3.0.0b. Tabs have an extra 40px padding and an extra height.
Can't set html in the tab.
I need to render a picture without text in the tab header. If I use an icon the height of the tab is not correct, if I use setHtml, the html is interpreted as a text.

How can we display html in the tab?


Colin Alworth
4 Jul 2012, 6:37 PM
From some very quick testing, it seems that the padding issue is because you are missing the reset.css file - check that it is being referenced correctly in your html file, and that the file is loading. The Chrome Inspector may prove useful for looking if a 404 is occurring when attempting to load this file.

The tab header html issue appears to be a bug, I'll look into it.

5 Jul 2012, 7:47 AM
You can use HtmlLayoutContainer(String (http://java.sun.com/javase/6/docs/api/java/lang/String.html?is-external=true) html) in order to make the html part of your title.
So something like

HtmlLayoutContainer yourString = new HtmlLayoutContainer("<h4>Hello World ! </h4>");


Colin Alworth
5 Jul 2012, 8:36 AM
Using a HtmlLayoutContainer is a bit overkill for this - just use SafeHtmlUtils.fromSafeConstant("<b>my html string</b>") to get a SafeHtml instance.

6 Jul 2012, 7:01 AM
Thanks Colin, I tried

TabPanel tabPanel = new TabPanel();
TabItemConfig config = new TabItemConfig();
HtmlLayoutContainer htmlString = new HtmlLayoutContainer("<h4>Hello World ! </h4>");
tabPanel.add(new ContentPanel(), config);
with no luck.

I also tried what you are suggesting Colin :

TabPanel tabPanel = new TabPanel();
TabItemConfig config = new TabItemConfig();
config.setHTML(SafeHtmlUtils.fromSafeConstant("<b>my html string</b>"));
tabPanel.add(new ContentPanel(), config);
with the same result
Thanks for your help

Colin Alworth
6 Jul 2012, 7:40 AM
Sorry if I wasn't clear:

There is a bug preventing this from working correctly, EXTGWT-2269, and we will work on this issue. A fairly simple workaround:

TabPanel tabPanel = new TabPanel();
TabItemConfig config = new TabItemConfig();
config.setHTML(SafeHtmlUtils.fromSafeConstant("<b>my html string</b>"));
ContentPanel p = new ContentPanel();
tabPanel.add(p, config);

// WORKAROUND: run TabPanel.update to re-apply the html style
tabPanel.update(p, config);

return tabPanel;

My comment was meant to convey that using HtmlLayoutContainer is a wasteful way of creating SafeHtml, and doesn't get around this issue being mentioned here anyway.

6 Jul 2012, 8:54 AM
Thanks Colin, that's exactly what I was looking for.


Colin Alworth
16 Jul 2012, 3:14 PM
This has been fixed in SVN, and will be available in the next release.