CheckBox with only own label rendering problems

[george9]

web mode
gxt-2.0-rc2
Windows XP

Following will:
- not render in IE 6, 7, 8
- render improperly in FF2, O9, O10, and hosted mode



package com.test.client;

import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

public void onModuleLoad() {

FormPanel formPanel = new FormPanel();
formPanel.setWidth(300);
FormData formData = new FormData();

CheckBox checkBox = new CheckBox();
checkBox.setAutoWidth(true);
checkBox.setHideLabel(true);
checkBox.setBoxLabel("Some longer label for the CheckBox");
formPanel.add(checkBox, formData);

RootPanel.get().add(formPanel);
}
}
Following will:
..same as above, but the CheckBox will not even show up in Opera 9 and 10.



package com.test.client;

import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Test implements EntryPoint {

public void onModuleLoad() {

FormPanel formPanel = new FormPanel();
formPanel.setWidth(400);
FormData formData = new FormData();

final TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
email.setAllowBlank(false);
formPanel.add(email, formData);

CheckBox checkBox = new CheckBox();
checkBox.setAutoWidth(true);
checkBox.setHideLabel(true);
checkBox.setBoxLabel("Some longer label for the CheckBox");
formPanel.add(checkBox, formData);

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

[sven]

Dont use autoWidth in that scenario. You should use FormData to set the width if the children. It works for me with that.

[george9]

Dont use autoWidth in that scenario. You should use FormData to set the width if the children. It works for me with that.

thanks for the tip.

altough when doing

FormData formData = new FormData("100%");..the checkbox is now a little bit offset in Chrome and Safari 4 (not centered in relation to the label).
(But it displays in Opera now, which is cool)

The IE's have problem rendering this example, but this is OK when the FormPanel is in another GXT container, which is my case.

With the CheckBox, I'm trying to solve somewhat common case, when a long label needs to be used for the CheckBox, so it doesn't fit into the form's label column.
Maybe something like Form.Field.flip(true) could be provided in the future..