DynamicForm breaks SectionStack

[slartidan]

I'm trying to build a section stack with a DynamicForm and some other components. I want all Sections to be visible at the same time ("VisibilityMode = Multiple").

I'm trying to archieve, that the form uses as much space as needed and the other components are sharing the remaining space.

But: I can only resize the sections once. Any further dragging of the section header will be ignored. This seems to be an issue of the SectionStack in combination with the DynamicForm.

1. Version numbers: tested with SmartClient Version: v10.0p_2015-01-28/LGPL Development Only (built 2015-01-28)
2. Browser: Firefox 31.0 Windows
3. sample code:

package v.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;

public class V implements EntryPoint {

	SectionStack layout = new SectionStack();

	public void onModuleLoad() {

		DynamicForm form = new DynamicForm();
		form.setFields(new TextItem("textinput", "textinput"));
		form.setBorder("solid 2px red");
		addSection(form);

		Label label = new Label("text");
		label.setBorder("solid 2px green");
		label.setHeight("*");
		addSection(label);

		Label label2 = new Label("text");
		label2.setBorder("solid 2px green");
		label2.setHeight("*");
		addSection(label2);

		layout.setVisibilityMode(VisibilityMode.MULTIPLE);
		layout.setWidth100();
		layout.setHeight100();

		layout.show();
	}

	private void addSection(Canvas content) {
		SectionStackSection section = new SectionStackSection();
		section.addItem(content);
		section.setExpanded(true);
		layout.addSection(section);
	}
}

Thanks in advance!

[slartidan]

Any progress?

Hi Isomorphic,

have you been able to reproduce this bug? Do you have any idea how to work around it?

Thanks in advance
slartidan

[Isomorphic]

We haven't tried this but at a guess the problem may be that the DynamicForm is expanding its content to fill its available space as you resize the section stack and so refusing to shrink (since it has overflow set to "visible").
Try setting overflow to "hidden" on the form.

[slartidan]

Solution not sufficient

Hi Isomorphic!

Setting overflow to hidden helps a bit - the section stack will not break and be usable even after resizing the sections.

BUT: the form section will take up much more space than needed. I want it to be initially as small as possible - but all sections should allow rescaling.

package v.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;

public class V implements EntryPoint {

	SectionStack layout = new SectionStack();

	public void onModuleLoad() {

		DynamicForm form = new DynamicForm();
		form.setFields(new TextItem("textinput", "textinput"));
		form.setBorder("solid 2px red");
		
		// suggestion of isomorphic, see post http://forums.smartclient.com/showpost.php?p=129910&postcount=3
		form.setOverflow(Overflow.HIDDEN);
		
		addSection(form);

		Label label = new Label("text");
		label.setBorder("solid 2px green");
		label.setHeight("*");
		addSection(label);

		Label label2 = new Label("text");
		label2.setBorder("solid 2px green");
		label2.setHeight("*");
		addSection(label2);

		layout.setVisibilityMode(VisibilityMode.MULTIPLE);
		layout.setWidth100();
		layout.setHeight100();

		layout.show();
	}

	private void addSection(Canvas content) {
		SectionStackSection section = new SectionStackSection();
		section.addItem(content);
		section.setExpanded(true);
		layout.addSection(section);
	}
}

[Isomorphic]

If you specify an explicit initial size (width/height) for the DynamicForm it should be respected.

[slartidan]

Workaround found

Thanks for your suggestion! When setting a fixed height, the section stack will not break.

In my case I don't know the number of fields of the form at compile time. Setting a fixed height is therefore not possible in my case.

However I was able to find a workaround. When the layout is drawn, I take the form's "visibleHeight" and use the value as "height" (with overflow hidden).

package v.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Random;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;

public class V implements EntryPoint {

	SectionStack layout = new SectionStack();

	public void onModuleLoad() {

		final DynamicForm form = new DynamicForm();
		form.setFields(getRandomFields());
		form.setNumCols(4);
		form.setBorder("solid 2px red");
		
		addSection(form);

		Label label = new Label("text");
		label.setBorder("solid 2px green");
		label.setHeight("*");
		addSection(label);

		Label label2 = new Label("text");
		label2.setBorder("solid 2px green");
		label2.setHeight("*");
		addSection(label2);

		layout.setVisibilityMode(VisibilityMode.MULTIPLE);
		layout.setWidth100();
		layout.setHeight100();

		layout.addDrawHandler(new DrawHandler() {
			
			@Override
			public void onDraw(DrawEvent event) {
				form.setHeight(form.getVisibleHeight());
				form.setOverflow(Overflow.HIDDEN);
			}
		});
		layout.show();
	}

	private FormItem[] getRandomFields() {
		int numberOfFields = Random.nextInt(8)+2;
		FormItem[] fields = new FormItem[numberOfFields];
		for (int i = 0; i < numberOfFields; i++)
			fields[i] = new TextItem("textinput"+i, "textinput "+i+" of "+numberOfFields);
		return fields;
	}

	private void addSection(Canvas content) {
		SectionStackSection section = new SectionStackSection();
		section.addItem(content);
		section.setExpanded(true);
		layout.addSection(section);
	}
}

Nevertheless I hope that the SectionStack-bug will be fixed in the future and I can then remove that workaround.