Layout Bug with VLayout, SectionStack, VLayout and ListGrid

[Blama]

Hi Isomorphic,

please see this minimal testcase (replace BuiltInDS.java), that does not render the upper of the two ListGrids correctly (screenshot included).
If you remove the ListGrid from the inner VLayout, the effect is gone.
I use SNAPSHOT_v9.1d_2014-01-22/EVAL Deployment in Eclipse DevMode.

In my real use case the result is the same and I additionally get the following log entries in the Development Mode tab in Eclipse (only in my project, not in this sample)

[ERROR] [lms] - 16:19:58.737:TMR8:WARN:GridBody:isc_LeadpickingVLayout_2_0_body:row heights not yet available; returning all zeroes
[ERROR] [lms] - 16:19:58.809:TMR8:WARN:GridBody:isc_LeadpickingVLayout_2_0_body:row heights not yet available; returning all zeroes
[ERROR] [lms] - 16:19:58.815:TMR8:WARN:GridBody:isc_LeadpickingVLayout_2_0_body:row heights not yet available; returning all zeroes

Best regards,
Blama



BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
	public void onModuleLoad() {
		com.google.gwt.user.client.Window.setMargin("0px");
		Myclass mc = new Myclass();
		mc.setWidth100();
		mc.setHeight100();
		mc.draw();
	}

	public final class Myclass extends VLayout {
		private ListGrid lg1;
		private ListGrid lg2;
		private SectionStack sectionStack;
		private SectionStackSection s1;
		private SectionStackSection s2;

		public Myclass() {
			super(20);
			setPadding(0);
			setHeight100();

			s1 = new SectionStackSection("Remove lg1 from VLayout and add directly with s1.setItems(lg1) to repair.") {
				{
					setExpanded(true);
				}
			};

			lg1 = new ListGrid(DataSource.get("animals")) {
				{
					setHeight100();
					setAutoFetchData(true);
				}
			};

			VLayout vl1 = new VLayout(5);
			vl1.setPadding(5);
			vl1.setMembers(lg1);
			s1.setItems(vl1);

			s2 = new SectionStackSection("S2") {
				{
					lg2 = new ListGrid(DataSource.get("supplyItem")) {
						{
							setHeight100();
							setAutoFetchData(true);

						}
					};
					setItems(lg2);
					setExpanded(true);
				}
			};

			sectionStack = new SectionStack() {
				{
					setSections(s1, s2);
					setVisibilityMode(VisibilityMode.MULTIPLE);
					setCanCollapseAll(false);
				}
			};
			addMember(sectionStack);
		}
	}
}

[Blama]

Hi Isomorphic,

did you already look into this one? For me its still the same in SNAPSHOT_v9.1d_2014-02-05/EVAL Deployment.

Best regards,
Blama

[Blama]

Hi Isomorphic,

just to let you know: This issue is still current in v9.1p_2014-04-24, FF26 Dev Mode.

Best regards,
Blama

[Blama]

Hi Isomorphic,

just to let you know: This issue is still current in v9.1p_2014-06-17/EVAL Deployment 2014-06-17, FF26 Dev Mode, but I have two updates:

• The bug report might not a bug, but related to a missing vl1.setHeight100();.
  But I'd not expect to need such a call, as the ListGrid lg1 already has it. Any pointers?
• With v9.1p_2014-06-17 I get the following warning (from SmartGWT console window):
  

  16:05:39.557:INFO:Log:initialized
  16:06:07.866:INFO:Log:isc.Page is loaded
  16:06:08.179:TMR0:WARN:Log:TypeError: isc.Canvas.get is not a function
  Stack from error.stack:
      [c]ScreenSpan.pageResized() @ builtinds/sc/modules/ISC_Core.js:2577
      [c]Page.handleEvent() @ builtinds/sc/modules/ISC_Core.js:1147
      EventHandler._fireResizeEvent() @ builtinds/sc/modules/ISC_Core.js:1446
      EventHandler._pageResize() @ builtinds/sc/modules/ISC_Core.js:1446
      [c]Class.fireCallback() @ builtinds/sc/modules/ISC_Core.js:282
      Timer._fireTimeout() @ builtinds/sc/modules/ISC_Core.js:1136
      unnamed() @ builtinds/sc/modules/ISC_Core.js:1132
      unnamed() @

  I think there were no warnings before with v9.1p_2014-04-24.

Best regards,
Blama

[Isomorphic]

Hi Blama,
We'll take a look at this.

The "pageResized" warning is an unrelated issue which has already been resolved (grab tomorrow's nightly to fix this).

Regards
Isomorphic Software

[Isomorphic]

Hi Blama
Re this:

The bug report might not a bug, but related to a missing vl1.setHeight100();.
But I'd not expect to need such a call, as the ListGrid lg1 already has it. Any pointers?

You do indeed need that call.
What's going on is this: The SectionStack has 2 sections, both expanded.
One contains a single ListGrid which has height set to 100% - basically telling it to take up all available space.
The other contains a Layout with no specified height, so it will explicitly size to basically as small as possible (since the other section's item - the ListGrid - takes up the entire available space).

The ListGrid within it has height set to 100% - which is telling it to take up all available space within its parent -- so it's taking up 100% of a very small parent layout. Ultimately this is too small to render in a meaningful way, so you end up with the odd clipped rendering you see (plus possible warnings resulting from there not being enough space to write out the normal HTML for a ListGrid in the DOM).

You can resolve this by sizing the VLayout vl1 larger (for example by setting its height to 100% via a call to setHeight100(), which will cause it to split the available space with the other ListGrid), or you could assign an explicit pixel height to the ListGrid rather than sizing it as a percentage of its parent.

Regards
Isomorphic Software