Strange ListGrid scrolling behaviour with autoFit inside a layout

[jumple]

Code below demonstrates the problem.

I have a VLayout with 2 panels
Top panel is HStack with couple of ListGrids that have

"showHeaderMenuButton":false,
"autoFitFieldWidths":true,
"autoFitWidthApproach":"both",
"autoFitData":"horizontal",

HStack is scrollable

On initial load grids have horizontal scrollbar (which should not be there since grids are set to autoFit everythig) and the last header "Header 3" is cut off. HStack also has a horizontal scrollbar which is meant to be there and it looks bad with grids' scrollbars on top of HStack's scrollbar.

After resizing HStack to make it 20px shorter - Header 3 is not cut off anymore and space for vertical scrollbars appears on grids (I added button to show this). At this point grids' horizontal scrollbar doesn't even work - just jerks the grids' body but stays at one spot and doesn't scroll since there is nothing to scroll.

After that - resizing HStack to restore it's height by adding 20px (I added a button to show this) - Header 3 is cut off again and the space for vertical scrollbars disappear - grids' horizontal scrollbar works again to reveal Header 3.

Resizing HStack with resizer to make it small enough for the vertical scrollbars of grids to actually show up - makes grids' horizontal scrollbar finally disappear.

Tested this on your demo site by pasting into code tab

var gridOptions = {
		"showHeaderMenuButton":false,
		"autoFitFieldWidths":true,
		"autoFitWidthApproach":"both",
		"autoFitData":"horizontal",
		"fields":[{
				"name":"0",
				"title":"Header 1"
			},{
				"name":"1",
				"title":"Header 2",
				"align":"right"
			},{
				"name":"2",
				"title":"Header 3",
				"align":"right"
			}
		],
		"data":[{
				"0":"Record 1",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 2",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 3",
				"1":"Value 1",
				"2":"Value which is longer"
			}
		]
	},
	hStack = isc.HStack.create({
		overflow: "auto",
		members: [
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions)
		]
	}),
	vLayout = isc.VLayout.create({
		autoDraw: true,
		top: 50,
		width : 500,
		height: 400,
		defaultResizeBars: "middle",
		members: [
			hStack,
			isc.ListGrid.create(gridOptions)
		]
	}),
	buttonDecrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		height: 50,
		title: "Decrease height of HStack by 20px - scroll bar space appears, Header 3 will not be cut off",
		action: function(){
			hStack.setHeight(hStack.getHeight()-20);
			this.hide();
			buttonIncrease.show();
		}
	}),
	buttonIncrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		height: 50,
		title: "Restore height of HStack (increase by 20px) - scroll bar space goes away, Header 3 will be cut off",
		action: function(){
			hStack.setHeight(hStack.getHeight()+20);
			this.hide();
			buttonDecrease.show();
		}
	});
buttonIncrease.hide();

[Isomorphic]

We're looking into this issue.
For now if you set 'leaveScrollbarGap' to false, this issue will go away for you

Regards
Isomorphic Software

[jumple]

Thanks

However leaveScrollbarGap: false does not help the fact that scrollbar space appears when decreasing height of HStack and disappears when increasing height

[Isomorphic]

We've made a framework change to resolve both issues (rendering the leaveScrollbarGap setting unnecessary and getting rid of the other problem when sizing smaller).
Please try the next nightly build, dated Oct 11 or above [in the 10.0 or 10.1 branch].

Regards
Isomorphic Software

[jumple]

Now with leaveScrollbarGap: true everything works fine.

But with leaveScrollbarGap: false there are 3 problems still

Problem 1

showCustomScrollbars: true

Press "Decrease height" of HStack to make grids scrollable

Then press "Increase height" to expose the whole height of grids - the empty transparent space for spacebar still remains (but should be gone)

Then press "Increase height" again or just sort any column of the grid - the space for spacebar is now gone as expected

var gridOptions = {
		"showHeaderMenuButton":false,
		"autoFitFieldWidths":true,
		"autoFitWidthApproach":"both",
		"autoFitData":"horizontal",
		leaveScrollbarGap: false,
		margin: 5,
		border: 1,
		showCustomScrollbars: true,
		"fields":[{
				"name":"0",
				"title":"Header 1"
			},{
				"name":"1",
				"title":"Header 2",
				"align":"right"
			},{
				"name":"2",
				"title":"Header 3",
				"align":"right"
			}
		],
		"data":[{
				"0":"Record 1",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 2",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 3",
				"1":"Value 1",
				"2":"Value which is longer"
			}
		]
	},
	hStack = isc.HStack.create({
		overflow: "auto",
		members: [
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions)
		]
	}),
	vLayout = isc.VLayout.create({
		autoDraw: true,
		top: 50,
		width : 500,
		height: 400,
		defaultResizeBars: "middle",
		members: [
			hStack,
			isc.ListGrid.create(gridOptions)
		]
	}),
	buttonDecrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		height: 25,
		title: "Decrease height",
		action: function(){
			hStack.setHeight(100);
		}
	}),
	buttonIncrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		top: 25,
		height: 25,
		title: "Increase height",
		action: function(){
			hStack.setHeight(hStack.getHeight()+50);
		}
	});

Problem 2

showCustomScrollbars: false


Press "Decrease height" of HStack to make grids scrollable

Then press "Increase height" to expose the whole height of grids - the empty (not transparent) space for spacebar still remains (but should be gone)

Then press "Increase height" again - the empty space for spacebar still remains and becomes transparent

Then press "Increase height" again or just sort any column of the grid - the space for spacebar is now gone as expected

var gridOptions = {
		"showHeaderMenuButton":false,
		"autoFitFieldWidths":true,
		"autoFitWidthApproach":"both",
		"autoFitData":"horizontal",
		leaveScrollbarGap: false,
		margin: 5,
		border: 1,
		showCustomScrollbars: false,
		"fields":[{
				"name":"0",
				"title":"Header 1"
			},{
				"name":"1",
				"title":"Header 2",
				"align":"right"
			},{
				"name":"2",
				"title":"Header 3",
				"align":"right"
			}
		],
		"data":[{
				"0":"Record 1",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 2",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 3",
				"1":"Value 1",
				"2":"Value which is longer"
			}
		]
	},
	hStack = isc.HStack.create({
		overflow: "auto",
		members: [
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions)
		]
	}),
	vLayout = isc.VLayout.create({
		autoDraw: true,
		top: 50,
		width : 500,
		height: 400,
		defaultResizeBars: "middle",
		members: [
			hStack,
			isc.ListGrid.create(gridOptions)
		]
	}),
	buttonDecrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		height: 25,
		title: "Decrease height",
		action: function(){
			hStack.setHeight(100);
		}
	}),
	buttonIncrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		top: 25,
		height: 25,
		title: "Increase height",
		action: function(){
			hStack.setHeight(hStack.getHeight()+25);
		}
	});

Problem 3 - Scenario 1

showCustomScrollbars: false

You can use the same code as Problem 2

Press "Decrease height" of HStack to make grids scrollable

Then press "Increase height" to expose the whole height of grids - the empty (not transparent) space for spacebar still remains (but should be gone)

Then sort any column of the grid - both vertical and horizontal scrollbars appear and the horizontal scrollbar only scrolls the body of the grid but not the headers





Problem 3 - Scenario 2

The scrollbars also appear if you resize the HStack to just a bit taller than girds' height

Just press "Decrease height" button to expose both scrollbars and the horizontal scrollbar doesn't scroll headers

var gridOptions = {
		"showHeaderMenuButton":false,
		"autoFitFieldWidths":true,
		"autoFitWidthApproach":"both",
		"autoFitData":"horizontal",
		leaveScrollbarGap: false,
		margin: 5,
		border: 1,
		showCustomScrollbars: false,
		"fields":[{
				"name":"0",
				"title":"Header 1"
			},{
				"name":"1",
				"title":"Header 2",
				"align":"right"
			},{
				"name":"2",
				"title":"Header 3",
				"align":"right"
			}
		],
		"data":[{
				"0":"Record 1",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 2",
				"1":"Value 1",
				"2":"Value 2"
			},{
				"0":"Record 3",
				"1":"Value 1",
				"2":"Value which is longer"
			}
		]
	},
	hStack = isc.HStack.create({
		overflow: "auto",
		members: [
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions),
			isc.ListGrid.create(gridOptions)
		]
	}),
	vLayout = isc.VLayout.create({
		autoDraw: true,
		top: 25,
		width : 500,
		height: 400,
		defaultResizeBars: "middle",
		members: [
			hStack,
			isc.ListGrid.create(gridOptions)
		]
	}),
	buttonDecrease = isc.Button.create({
		autoDraw: true,
		width: 500,
		height: 25,
		title: "Decrease height",
		action: function(){
			hStack.setHeight(120);
		}
	});

[Isomorphic]

Just a quick note to let you know this is not forgotten. We will follow up when we have more information for you

Regards
Isomorphic Software

[jumple]

Thanks for the update, I appreciate it

[Isomorphic]

We've made a change to both 10.0 and 10.1 to address the first issue here (which was also having an impact on your other scenarios).
You can pick this up in the next nightly builds (dated Oct 16 and above).

With respect to the issues with 'showCustomScrollbars' being set to false (in the second and third test cases) - there is currently something on an incompatibility between this setting and the auto-fit-data. We're looking into this, but you can actually work around the underlying problem here by making use of the NativeScrollbar class.
If instead of setting

    showCustomScrollbars: false,

within your grid options, you set

    scrollbarConstructor: "NativeScrollbar",

... we believe the latter issues will be resolved for you and the user experience should meet your requirements (showing a native browser style scrollbar to the user).

Please let us know if this doesn't resolve things for you.

Regards
Isomorphic Software

[jumple]

Thank you, I appreciate

[Isomorphic]

A quick follow up on this.
We've spent some time looking into the problem with useNativeScrollbars:true, and it appears to be a manifestation of a native bug in Chrome whereby if css scrollbars are present in an element with overflow set to "auto" (due to large content), when the size of content is reduced, the scrollbars are left in place.
(Reported as Webkit bug #21462 / #71541).

The native bug is that the scrollbars are left in place when they shouldn't be. The persistence of the header sort button / other oddities with sizing are a result of this native behavior.

A bug like this demonstrates a key advantage of our approach of using scrollbars we create and manage ourselves rather than relying on native scrollbars - namely that we're insulated from cross browser bugs and quirks like this.
We'd recommend you continue to use the "NativeScrollbar" scrollbarConstructor as a workaround for this.

Regards
Isomorphic Software

[jumple]

Thank, this workaround is completely acceptable