DynamicForm sizing problems

[zdary]

Hi,

I've noticed that in a current version of smartGWT (23-05-2011)
there is an unnecessary blank space in a dynamic form before a first item in that form. See a picture attached.

Also there is a TabSet in the middle of that VLayout with an automatic height set. Resulting in height of 1 pixel. That is wrong too.

geographicInfoTabs = new TabSet();
Tab geographbicInfoTab = new Tab("geographbic info");
geographicInfoTabs.addTab(geographbicInfoTab);
geographbicInfoTab.setPane(geographicInfoForm);
geographicInfoTabs.setWidth(462);  
geographicInfoTabs.setAutoHeight();

Cheers,
Zdary

[Isomorphic]

You most likely have external CSS in your project (see FAQ).

[zdary]

Hi,

no, I don't have an external CSS file. I removed it from the main html file.

I prepared a test case for you

public void onModuleLoad() {
VLayout layout = new VLayout();
layout.setWidth(492);
layout.setHeight100();
layout.setMargin(10);
layout.setMembersMargin(10);

DynamicForm form = new DynamicForm();
form.setIsGroup(true);
form.setHeight100();
form.setValidateOnExit(true);
form.setTitleAlign(Alignment.LEFT);
form.setTitleWidth(150);
form.setFixedColWidths(true);
form.setTitleSuffix("");
form.setRequiredTitleSuffix("");
form.setLayoutAlign(VerticalAlignment.BOTTOM);
form.setGroupTitle("title");
form.setPadding(10);

IntegerItem codeItem = new IntegerItem("internalId", i18nConstants.settingsTree_employeeManagement_addEditWindow_dynamicForm_code());
codeItem.setWidth(300);

DynamicForm form2 = new DynamicForm();
form2.setIsGroup(false);
form2.setHeight100();
form2.setValidateOnExit(true);
form2.setTitleAlign(Alignment.LEFT);
form2.setTitleWidth(150);
form2.setFixedColWidths(true);
form2.setTitleSuffix("");
form2.setRequiredTitleSuffix("");
form2.setLayoutAlign(VerticalAlignment.BOTTOM);
form2.setGroupTitle("title");
form2.setPadding(10);
TabSet tabs = new TabSet();
Tab tab = new Tab("tab");
tab.setPane(form2);
tabs.addTab(tab);
//tabs.setAutoHeight();
//tabs.setAutoWidth();
tabs.setHeight(100);
tabs.setWidth(472);
ComboBoxItem countryItem = new ComboBoxItem("countryId", "xxx");
countryItem.setWidth(300);

form.setFields(codeItem);
form2.setFields(countryItem);

layout.addMember(form);
layout.addMember(tabs);
layout.draw();
}

Cheers,
Zdary

[Isomorphic]

We were not able to reproduce the gap you show or the short tabset issue. Please look very very carefully for external CSS (use Firebug) and for any variant from the standard SDK (such as skin customizations, global settings, or using skins from prior versions with more recent versions).

If you still think this is a framework problem, please show us some screen captures of what Firebug shows you for the space where there's a gap and the surround elements.

[zdary]

Hi,

1)
for a firebug I can see that the problem is caused by .normal form skin_styles.css where there is a font-size set to 11px;

See a screenshot at www.zdary.cz/firebug.png

2)
Have you reproduced the error with TabSet.setAutoHeight(); ?

3)
When debuging this I have also noticed that
DynamicForm.setPadding(10); doesn't work on a right side only.

See a screenshot at www.zdary.cz/firebug2.png

Cheers,
Zdary

[Isomorphic]

Those cells in the top of the DynamicForm are designed and tested to render as zero height in all supported browsers. You've got external CSS, probably something like a line-height setting applied to <td>, or you've got the equivalent of this as a non-default browser settings of some kind. Or a browser extension messing up rendering.

[zdary]

Hi,

would it help if I prepared a complete testcase including all libraries - ready to run?
I would make it as simple as possible.

best regards,
Zdary