View Full Version : Bug in HtmlEditor ...

4 Sep 2009, 12:22 AM

I use this plugin http://code.google.com/p/gwt-maven/ in my GWT + GXT plugin but I have a problem with one GXT component: HtmlEditor.
I created my project using this plugin and I added GXT library in my project as explain in the GXT setup file contained in GXT downloaded folder. ie.

Quick Setup for Ext GWT 2.X

Note : Ext GWT 2.X requires GWT 1.6.x

STEP 1 -> Create a GWT 1.6.x project within Eclipse.

Copy the contents of the /resources folder in the download to a {foldername} location with your war folder.
Substitute {foldername} with the name of the folder you've created for resources within your war folder.

STEP 3 -> Add the following stylesheet to your host page.

<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />

STEP 3b -> If you are using Charts, add the following script to your host page.

<script language='javascript' src='{foldername}/flash/swfobject.js'></script>

STEP 4 -> Add the following entry to you projects module xml file.

<inherits name='com.extjs.gxt.ui.GXT'/>

STEP 5 -> Ext GWT requires the following doctype (quirksmode).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I also added GXT dependency in my pom.xml. All works fine but when I use the HtmlEditor component, the toolbar doesn't displayed correctly. All buttons are hiden.

To investigate the problem, I created another GWT project using GWT eclipse plugin developped by GWT Team since GWT 1.7. When I use the same code in this GWT project, it works fine. All components are displayed correcctly.

Please do you have any idea about this problem please ?

Here is my sample code :

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.HtmlEditor;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.google.gwt.user.client.Element;

public class AdvancedFormsExample extends LayoutContainer {

private VerticalPanel vp;

public AdvancedFormsExample() {
vp = new VerticalPanel();

protected void onRender(Element parent, int index) {
super.onRender(parent, index);

private void createTabForm() {
FormData formData = new FormData("100%");
FormPanel panel = new FormPanel();
panel.setLayout(new FitLayout());

TabPanel tabs = new TabPanel();

TabItem personal = new TabItem();
personal.setStyleAttribute("padding", "10px");
personal.setText("Personal Details");
personal.setLayout(new FormLayout());

TextField<String> name = new TextField<String>();
name.setFieldLabel("First Name");
personal.add(name, formData);

TextField<String> last = new TextField<String>();
last.setFieldLabel("Last Name");
personal.add(last, formData);

TextField<String> company = new TextField<String>();
personal.add(company, formData);

TextField<String> email = new TextField<String>();
personal.add(email, formData);


TabItem numbers = new TabItem();
numbers.setStyleAttribute("padding", "10px");
numbers.setText("Phone Numbers");
numbers.setLayout(new FormLayout());

TextField<String> home = new TextField<String>();
numbers.add(home, formData);

TextField<String> business = new TextField<String>();
numbers.add(business, formData);

TextField<String> mobile = new TextField<String>();
numbers.add(mobile, formData);

TextField<String> fax = new TextField<String>();
numbers.add(fax, formData);


panel.addButton(new Button("Cancel"));
panel.addButton(new Button("Submit"));

panel.setSize(340, 200);


private void createColumnForm() {
FormData formData = new FormData("95%");
FormPanel panel = new FormPanel();
panel.setSize(600, -1);

LayoutContainer main = new LayoutContainer();
main.setLayout(new ColumnLayout());

LayoutContainer left = new LayoutContainer();
left.setStyleAttribute("paddingRight", "10px");
FormLayout layout = new FormLayout();

TextField<String> first = new TextField<String>();
first.setFieldLabel("First Name");
left.add(first, formData);

TextField<String> company = new TextField<String>();
left.add(company, formData);

DateField birthday = new DateField();
left.add(birthday, formData);

LayoutContainer right = new LayoutContainer();
right.setStyleAttribute("paddingLeft", "10px");
layout = new FormLayout();

TextField<String> last = new TextField<String>();
right.add(last, formData);

TextField<String> email = new TextField<String>();
right.add(email, formData);

Radio radio1 = new Radio();

Radio radio2 = new Radio();

RadioGroup group = new RadioGroup();
group.setFieldLabel("Ext GWT User");

main.add(left, new ColumnData(.5));
main.add(right, new ColumnData(.5));


HtmlEditor a = new HtmlEditor();
panel.add(a, new FormData("100%"));

panel.addButton(new Button("Cancel"));
panel.addButton(new Button("Submit"));



Thank you in advance


14 Dec 2009, 12:30 PM
I am using GXT 2.1.0 and GWT 2.0 for our application.

I have a HTMLEditor on a FormPanel and by default I have set the property on the HTMLEditor to be hidden and on the click of the button I show the HTMLEditor.

Some how when the HTMLEditor is displayed, the toolbar buttons for the HTMLEditor are displayed on the extreme right as a >> mark and on the click of the mark shown the toolbar is displayed as a vertical slider.

I have inserted the images for the behavior i am getting.

The HTMLEditor display on hide and show works perfectly fine with GXT 2.0.1 and GWT1.7.

Is this HTMLEditor not showing the toolbar buttons while you do hide and show is a bug.



14 Dec 2009, 2:05 PM
Hello navi75
I had a similar problem. Your problem is CSS problem. You can try to remove all line from your CSS file, and try again. If it works, try to reinsert your css property one by one in your css file to detect the problem.

15 Dec 2009, 7:56 AM
try this example? the same?

after update from 2.0 to 2.1 check if you also update the gxt-all.css and all image resources!

15 Dec 2009, 8:21 AM
Hi Arno & Dialloma,

It looks like the issue is with the GXT ToolBar component as How it is placed on the HTMLEditor. I have investigated a bit more on the IE7 and FireFox browser with the Debugger.

It looks like there is a bug in GXT2.1.0 with the HTMLEditor toolbar is hidden and placed on extreme right as the toolbar component is using the other <TD> element which is aligned right.

With GXT2.0.1 , GWT1.7, IE7

The toolbar on the HTMLEditor uses the <TD Class=x-toolbar-left> and align="left" and when I do hide and show of the HTMLEditor component, the toolbar is displayed correctly.

With GXT2.0.1, GWT1.7, FireFox3.0.1 has the similar behavior with GXT2.1.0, GWT2.0, IE7.0 where the toolbar on the HTMLEditor is hidden and moved to extreme right bco'z the toolbar is using <TD Class=x-toolbar-right> and align="right"

The above classes are in gxt-all.css and I have updated all the CSS and image resources from 2.0.1 to 2.1.0

It looks like there is a bug in GXT2.1.0 with the HTMLEditor toolbar is hidden and placed on extreme right as the toolbar component is using the other <TD> element which is aligned right.

Also in the GXT demo example for the HTMLEditor under the Advanced Forms behave correctly with GXT2.1.0 as it does not have the similar behavior of hide and show the component which I am trying to achieve.

So any help from the GXT team will be much appreciated.


15 Dec 2009, 11:02 AM
Are you try to modify your CSS as I said in my last thread ? There is no bug in GXT, I told you that I had the similar problem. But by removing some css lines all worked. Try it

16 Dec 2009, 7:25 AM
Thanks Dialloma for your response.

I do not understand as Why I have to remove some lines from the generic GXT CSS
gxt-all.css file which is provided by GXT.

If I remove some lines from generic CSS file in order to make it work in GXT2.1.0 and then in next release of GXT2.1.x I have to remember the same changes to be applied to the CSS in order to make it work.

My understanding is that the generic CSS (gxt-all.css) is provided by the GXT team as a package when you download any new version of GXT and all the components should work.

So the GXT 2.1.0 has a bug in HTMLEditor not displaying the toolbar correctly when you use hide and show of the component.


16 Dec 2009, 10:31 AM

You have remove some lines in your own CSS file not in GXT css file. You don't need to modify gxt-all.css file provided by GXT. You know, when you gwt maven plugin to create your problem, the plugin generate automaticaly CSS file for your project and some properties inside the file. you have to remove theses lines. And investigate you CSS file carefuly. I confirm that there is no bug in GXT, because when you visualize the sample in your browser, all works fine. Why it doen't work for you ?

16 Dec 2009, 7:47 PM

I have traced with the FireBug debugger on FireFox and with the IE DeveloperTool Bar on IE7.0, the HTMLEditor Toolbar only refers to gxt-all.css.

I do not have any other CSS files reference to my project.


17 Dec 2009, 2:02 AM
Have you tried to use the forum search? There are a couple of threads that give you the solution. GXT will add a workaround at a later time.

17 Dec 2009, 2:58 AM

Thanks for your response.

I am unable to find any solution for the same in the search forum.

I would appreciate if you can provide me the link for the solution from the search forum.

Also when would GXT will be able to provide the fix for the same as it does not work with GXT2.1.0


17 Dec 2009, 2:59 AM
There is no need for a real fix. You need to switch the hidemode.

17 Dec 2009, 3:17 AM

Do I need to use the following values to make the HTMLEditor toolbar working properly incase of what i want to achieve when I want to hide and show the HTMLEditor.

1) set for the HTMLEditor.setHideMode(Style.HideMode.DISPLAY) while displaying the HTMLEdior.
2)To hide the HTMLEditor I can use HTMLEditor.hide

Is that what you mean with switch to hidemode.

And What does the other hidemode value corresponds to OFFSETS,VISIBILITY for a component.


17 Dec 2009, 4:28 AM

If your project is not critical and no big, you can try to send me it by mail. I can try to help to fix you problem. If you are ok, send me it at this mail. webmaster@dialloma.com


17 Dec 2009, 11:59 AM

I have tried using HTMLEditor.setHideMode(Style.HideMode.DISPLAY); while showing the HTMLEditor but the above call does not even display the HTMLEditor on the formpanel.

So can you please help me with the issue as what should be the workaround to fix the HTMLEditor toolbar buttons not displaying correctly while hiding and showing the HTMLEditor in GXT2.1.0.

Is there any documentation or an example for HideMode values such as DISPLAY,OFFSETS,VISIBLE.

As I said the HTMLEditor was working good with GXT2.0.1 since upgrading to GXT2.1.0 the toolbar is not displaying correctly.


18 Dec 2009, 2:57 AM
I wanted to chime in and say that this bug is absolutely 100% reproducible in GXT 2.1.0, just as the original poster said.

An easy way to see the bug is to create a DeckPanel with two pages -- the first should have just an HTML on it and the second should have the HTML editor.

If you start up the app and do deckPanel.showWidget(0) in onModuleLoad(), the bug will happen. If you do deckPanel.showWidget(1), it will not.

So, the bug has something to do with the fact that the HTMLEditor is not shown when the app starts up.

I spent some time messing with the css and it looks like it might somehow relate to the .x-toolbar padding setting (currently set to 2px). I believe this because, if i remove that one line, the buttons suddenly show up. However, they are placed way too close to one another and the clickable parts of the buttons are too small.

Another thing I tried was to subclass the HTMLEditor and call toolbar.setEnableOverflow(false); in onRender(). This has the exact same effect as removing the padding line above.

I'm afraid I don't know enough about GXT to propose a real fix. For now it looks like I'll be forced to downgrade unless someone is willing to look into the problem.

18 Dec 2009, 3:01 AM
It is not a bug. I gave two solutions for this.

A later release will add a workaround for this so you dont need to change your code.

18 Dec 2009, 7:02 AM

what are the two solutions you gave to resolve the issue?

Can you please provide a working example for the same?


18 Dec 2009, 11:41 AM
I haven't seen any solutions, aside from downgrading.

I was also able to reproduce the bug by putting a Toolbar into an Accordion layout. If the section of the Accordion containing the Toolbar is not displayed when the application first starts, the problem happens.

I too would appreciate a code snippet showing the solution. I'm a bit surprised that this could be viewed as "correct" behavior. Why would the correct behavior for a widget be to behave totally differently depending only on whether it is visible when the page is first loaded?

22 Jan 2010, 5:29 PM
GXT Development Team do we have any solution to this problem. It's been almost more than a month and no one has responded with any solution.

I would appreciate if GXT development team can provide any solution as we are unable to use the migrate from GXT 2.0.1 to latest GXT 2.1.0.