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
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
Code:
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();