PDA

View Full Version : [CLOSED][3.2.2] Horizontal scrollbar missing in IE strict mode


aedos
3 Jun 2010, 2:22 PM
Ext Version:


3.2.2

Browser Version:


IE
Firefox

Description:
When the page content can't fit into the browser screen, our requirement is to show scroll bars, so that the user knows there is more content to see and would be able to access it.


In Firefox, the following code generates a horizontal scroll bar correctly, when the browser window is not wide enough to show all data.
In IE 7, horizontal scroll bar is missing, and the user has no clue that there are more data to see.
In IE 8, horizontal scroll bar will only show up when refreshing the browser, but not when resizing the window.

If remove "strict mode" (DOCTYPE at the top of the HTML source), scroll bar shows up for IE as well. However we can't use this as a solution because we need strict mode for good reasons.

Test Case:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="javascript/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="javascript/ext-all-debug.js"></script>

<script type="text/javascript">
var grid = {
xtype: 'editorgrid',
autoHeight:true,
store : {
xtype: 'arraystore',
data : [
[
'text 1',
'text 2',
'text 3',
'text 4',
'text 5',
'text 6',
'text 7',
'text 8',
'text 9',
'text 10',
'text 11',
'text 12'
]
],
fields : [
'f1',
'f2',
'f3',
'f4',
'f5',
'f6',
'f7',
'f8',
'f9',
'f10',
'f11',
'f12'
]
},
columns : [
{header:'Col 1', dataIndex:'f1'},
{header:'Col 2', dataIndex:'f2'},
{header:'Col 3', dataIndex:'f3'},
{header:'Col 4', dataIndex:'f4'},
{header:'Col 5', dataIndex:'f5'},
{header:'Col 6', dataIndex:'f6'},
{header:'Col 7', dataIndex:'f7'},
{header:'Col 8', dataIndex:'f8'},
{header:'Col 9', dataIndex:'f9'},
{header:'Col 10', dataIndex:'f10'},
{header:'Col 11', dataIndex:'f11'},
{header:'Col 12', dataIndex:'f12'}
]
}

Ext.onReady(function() {
new Ext.Viewport({
layout:'border',
items:[{
region:'center',
autoScroll: true,
frame:false,
defaults: {
autoHeight: true,
autoWidth: true
},
id: 'centerPanel',
layout: 'vbox',
align: 'stretch',
items:[ grid , {title:'Title', html:'Body'} ]
}]
})
});

</script>
</head>
</html>
evant
3 Jun 2010, 3:30 PM
If you only have a single child item, why are you nesting it inside a vbox layout? Use a fit layout so it will fit to the size of the parent container.

Also, why not just make the grid the center region, why wrap it in a panel unnecessarily? Doesn't really make sense.
aedos
3 Jun 2010, 5:02 PM
Hi Evan,
This code sample is over simplified to demonstrate the issue. There are other items under the center panel.
So how can we make the scrollbar show up if the content is too big?
evant
3 Jun 2010, 5:06 PM
It will automatically, assuming your layouts are setup correctly.
aedos
3 Jun 2010, 5:17 PM
Hi Evan,

I just modified the code sample to add another panel as sibling of the gird. If you view the page in IE7, you will see the problem as described. Questions:


Do you see any invalid layout configuration in the sample code? If so, how would you suggest fixing it?
How to make scroll bar show up when the content is too big in IE strict mode?
vbox layout with align=stretch does not make the second panel stretch to the container width. It looks pretty bad as it. Is it a bug with "vbox" layout?

Thanks! I'd be glad to provide more info if needed.
evant
3 Jun 2010, 5:22 PM
You need to provide some kind of sizing, you can't use autoHeight/width when using layouts, it won't work consistently, especially not cross browser.

BTW, you haven't specified stretch properly, it should be:



var grid = {
xtype: 'editorgrid',
height: 100,
store: {
xtype: 'arraystore',
data: [['text 1', 'text 2', 'text 3', 'text 4', 'text 5', 'text 6', 'text 7', 'text 8', 'text 9', 'text 10', 'text 11', 'text 12']],
fields: ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12']
},
columns: [{
header: 'Col 1',
dataIndex: 'f1'
}, {
header: 'Col 2',
dataIndex: 'f2'
}, {
header: 'Col 3',
dataIndex: 'f3'
}, {
header: 'Col 4',
dataIndex: 'f4'
}, {
header: 'Col 5',
dataIndex: 'f5'
}, {
header: 'Col 6',
dataIndex: 'f6'
}, {
header: 'Col 7',
dataIndex: 'f7'
}, {
header: 'Col 8',
dataIndex: 'f8'
}, {
header: 'Col 9',
dataIndex: 'f9'
}, {
header: 'Col 10',
dataIndex: 'f10'
}, {
header: 'Col 11',
dataIndex: 'f11'
}, {
header: 'Col 12',
dataIndex: 'f12'
}]
}

Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
autoScroll: true,
frame: false,
id: 'centerPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [grid, {
title: 'Title',
html: 'Body',
flex: 1
}]
}]
})
});
aedos
3 Jun 2010, 5:28 PM
Thanks for fix the stretch setting!

However, the scroll bar still doesn't show up at all now. What can I do about it?
evant
3 Jun 2010, 5:53 PM
Works fine for me: http://img217.imageshack.us/i/works.png/
aedos
4 Jun 2010, 1:09 PM
I see. The difference is that you removed all instances of "autoHeight:true" from the configuration, and set a fixed pixel height for the grid. (Btw, why does height setting affect horizontal scroll bar?)

However, because the panel content is highly dynamic for us (e.g., #rows in grid or cell content varies), we can't set a predefined pixel height. Our requirement is not to leave blank space on the UI when the grid has fewer rows, and to avoid unnecessary scrolling.

Is there a way to allow scroll bar to show up only when necessary, without setting a fixed pixel height (or width)? Thanks for your help! This is a critical issue for us.
evant
4 Jun 2010, 5:42 PM
Then you have to manage the size yourself. You can't use autoWidth/height items inside layouts. The whole point of using a layout is for it to size the child items appropriately to fit. By specifying auto, you're essentially saying you don't want the layout manager to touch it, which is counter-intuitive.
aedos
4 Jun 2010, 5:50 PM
Thanks for baring with my learning process. So, I'm currently trying to define an adjustHeight() function on the Grid, and invoke it during "viewReady" and "refresh" event. The end result seems fine with initial testing. Does it look like a reasonable solution?


adjustHeight : function() {
var scroller = this.getView().scroller;
var mainBody = this.getView().mainBody;
if (scroller && mainBody) {
var diff = mainBody.getViewSize().height - scroller.getViewSize().height;
if (diff != 0) {
this.setHeight(this.getHeight() + diff)
}
}
}