[FIXED] Fields disappearing on Click on FormPanel (Demo attached)

[jraue]

Hi folks,

In our application we have a FormPanel with some TextFields. Some of them need to be capable to display beside the text a CheckBox in certain cases based on a boolean given in the constructor (imagine it a bit like bul processing in iTunes).

For that, I created a class ConfigurableTextField that derives from MultiField and contains a TextField and a CheckBox. When I add this to a FormPanel, I experience a strange effect: When entering text in multiple fields or clicking CheckBoxes or even on the form some TextFields disappear. You can easily see that in attached sample code.

Maybe I am doing something in my code or it is a bug. Either way, I am glad for hints on how to overcome that. NB: The effect only shows if the FormPanel is child to somthing else (HorizontalPanel in the sample code). If you add it to the ViewPort directly, everything works.

Thanks a lot for your help, guys. GXT rocks!

Joachim





public class ClientTest extends LayoutContainer implements EntryPoint {

protected static final boolean CONFIGURABLE = false;

protected static final int WIDTH_PROPERTY_PANEL = 420;
protected static final int WIDTH_LABEL = 150;
protected static final int WIDTH_FIELD = 210;

/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Viewport viewport = new Viewport();
viewport.setLayout(new FillLayout());

final HorizontalPanel hp = new HorizontalPanel();

final FormPanel formPanel = new FormPanel();
formPanel.setHeading("My Form Panel");
formPanel.setFieldWidth(WIDTH_FIELD);
formPanel.setLabelWidth(WIDTH_LABEL);
formPanel.setLabelAlign(LabelAlign.RIGHT);
formPanel.setBorders(false);
formPanel.setFrame(true);
formPanel.setWidth(WIDTH_PROPERTY_PANEL);

final ConfigurableTextField d1TextField = addTextField(formPanel, "Value 1", 1);
final ConfigurableTextField d2TextField = addTextField(formPanel, "Value 2", 2);
final ConfigurableTextField d3TextField = addTextField(formPanel, "Value 3", 3);
final ConfigurableTextField d4TextField = addTextField(formPanel, "Value 4", 4);

hp.add(new Text("Imagine other elements here"));
hp.add(formPanel);
viewport.add(hp);
RootPanel.get().add(viewport);
}

protected ConfigurableTextField addTextField(final FormPanel parentContainer, final String fieldLabel, final int fieldId) {
final ConfigurableTextField textField = new ConfigurableTextField(fieldId, CONFIGURABLE);
textField.setFieldLabel(fieldLabel);
parentContainer.add(textField);
return textField;
}

class ConfigurableTextField extends MultiField<Field<?>> {

int fieldId;

TextField<String> textField;
CheckBox configCheckBox;

public ConfigurableTextField(final int fieldId, final boolean configurable) {
super();

this.fieldId = fieldId;

textField = new TextField<String>();
add(textField);

if (configurable) {
configCheckBox = new CheckBox();
add(configCheckBox);
}
}

public int getFieldId() {
return fieldId;
}

@Override
public void setWidth(final int width) {
if (configCheckBox != null) {
textField.setWidth(width - 30);
configCheckBox.setWidth(20);
} else {
textField.setWidth(width);
}

super.setWidth(width);
}
}
}

[darrellmeyer]

I tested your code and did not have any problems. Can you use firebug to inspect the DOM to see what is going on with the missing fields?

[jraue]

Darrell,

I just had a close look into it. The code does work fine with Firefox and Opera, however the problem described clearly appears in IE (Tested under Vista, presumingly XP is also affected).

You can quickly see it if you type text into one field. When you then tick a checkbox the other TextFields disappear.

[darrellmeyer]

I previously tested your code in IE. Are you using any custom CSS? Can you use IE Developer Toolbar to look at the DOM when the fields disappear to see what styles are being applied that might be cause this issue?

[jraue]

I am not using any custom CSS. Using the dev toolbar, I cannot really draw conclusions myself. The style for the INPUT element remains the same it seems, however it is suddenly positioned way off (see attached pic). The TD element stays where it should be. What do you think it could be? Can you also see this behavior with my code in IE?

[jraue]

Again with better readability

[darrellmeyer]

Try increasing your field width. If that does not work,compile your test module, zip up the www folder, and send me the file.

[jraue]

Increasing the field width (up to 800) did not work. The zip file was too large to post in the forum (535 KB). I put it for you online at this page (http://www.informatik.uni-freiburg.de/~raue/formPanelTest.zip) temporarily. Thanks a lot!

[posta07]

Have you found anything with this?

I experience something similar, however, instead of disappearing fields, my field is shifted upward onto the tabs in a tabPanel.

[gslender]

could be doctype

[posta07]

No :-/ Not doctype.
My doctype is correct.

Thanks though.

[darrellmeyer]

Fix is in SVN.

[jraue]

What doctype do you mean? Any news? Thanks, guys!

[gslender]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

[posta07]

What doctype do you mean? Any news? Thanks, guys!

The GWT 1.5 application creator automatically uses this doctype in the client/public/<modulename>.html file: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

GXT doesn't work well with that one.

Use the aforementioned (gslender's recommendation) doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

[jraue]

Problem with afore-posted code persists in GXT 1.0.2, which, I assume, was released after your fix.

@posta07: Thanks for your clarification, I already use <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

[jraue]

Please change the thread title -- this issue is not fixed as of GXT 1.0.2, thanks!