PDA

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



drkstr
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();
folder.setWidth(640);
folder.setHeight(480);

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

RootPanel.get().add(folder);
}
}


34517

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!

kourian
4 Jul 2012, 5:33 AM
Hi,

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?

Thanks

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.

boermansjo
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>");


config.setHTML(yourString.getHTML());

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.

kourian
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>");
config.setHTML(htmlString.getHTML());
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
36904
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.

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

Cheers!

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