PDA

View Full Version : horizontal scrollbar appearing in Firefox but not in IE8



Jeff Liotta
21 Nov 2011, 1:33 PM
Hi
With the following border layout with another border layout nested in the 'center' pane, I created some large data that creates horizontal scroll.
The same code displays horizontal scrollbar in FireFox 3.6.23 but not in IE 8
Using Ext JS 4.0.6
2945829459



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Combo.html</title>

<link type="text/css" rel="stylesheet" href="ext-js/resources/css/ext-all.css" type="text/css" />

<script src="scripts/ext-all-debug.js" type="text/javascript" charset="UTF-8"></script>


</head>

<body>
<script type="text/javascript">
Ext.onReady( function()
{Ext.QuickTips.init();
Ext.create('Ext.Viewport', {
layout: "border",
items: [{
region: "center",
title: "center",
layout: "fit",
items: [{
layout: "border",
items: [{
region: "center",
defaults: {
autoScroll: true
},
title: "blocks",
items: [{
xtype: "tabpanel",
activeTab: 0,
items: [{
xtype: "panel",
title: "test"
}, {
xtype: "panel",
title: "one"
}, {
xtype: "panel",
title: "two"
}, {
xtype: "panel",
title: "three"
}, {
xtype: "panel",
title: "four"
}, {
xtype: "panel",
title: "five"
}]
}, {
layout: "table",
layoutConfig: {
columns: 2
},
defaults: {


},
items: [{
html: "col 0, row 0",
items: [{
layout: "table",
layoutConfig: {
columns: 5
},
defaults: {


},
items: [{
html: "col 0, row 0"
}, {
html: "col 0, row 1"
}, {
html: "col 0, row 2"
}, {
html: "col 0, row 3"
}, {
html: "col 0, row 4"
}, {
html: "col 1, row 0"
}, {
html: "col 1, row 1"
}, {
html: "col 1, row 2"
}, {
html: "col 1, row 3"
}, {
html: "col 1, row 4"
}, {
html: "col 2, row 0"
}, {
html: "col 2, row 1"
}, {
html: "col 2, row 2"
}, {
html: "col 2, row 3"
}, {
html: "col 2, row 4"
}, {
html: "col 3, row 0"
}, {
html: "col 3, row 1"
}, {
html: "col 3, row 2"
}, {
html: "col 3, row 3"
}, {
html: "col 3, row 4"
}, {
html: "col 4, row 0"
}, {
html: "col 4, row 1"
}, {
html: "col 4, row 2"
}, {
html: "col 4, row 3"
}, {
html: "col 4, row 4"
}]
}]
}, {
html: "col 0, row 1",
items: [{
layout: "table",
layoutConfig: {
columns: 4
},
defaults: {


},
items: [{
html: "col 0, row 0"
}, {
html: "col 0, row 1"
}, {
html: "col 0, row 2"
}, {
html: "col 0, row 3"
}, {
html: "col 1, row 0"
}, {
html: "col 1, row 1"
}, {
html: "col 1, row 2"
}, {
html: "col 1, row 3"
}, {
html: "col 2, row 0"
}, {
html: "col 2, row 1"
}, {
html: "col 2, row 2"
}, {
html: "col 2, row 3"
}, {
html: "col 3, row 0"
}, {
html: "col 3, row 1"
}, {
html: "col 3, row 2"
}, {
html: "col 3, row 3"
}]
}]
}, {
html: "col 1, row 0"
}, {
html: "col 1, row 1",
items: [{
layout: "table",
layoutConfig: {
columns: 45
},
defaults: {


},
items: [{
html: "col 0, row 0"
}, {
html: "col 0, row 1"
}, {
html: "col 0, row 2"
}, {
html: "col 0, row 3"
}, {
html: "col 1, row 0"
}, {
html: "col 1, row 1"
}, {
html: "col 1, row 2"
}, {
html: "col 1, row 3"
}, {
html: "col 2, row 0"
}, {
html: "col 2, row 1"
}, {
html: "col 2, row 2"
}, {
html: "col 2, row 3"
}, {
html: "col 3, row 0"
}, {
html: "col 3, row 1"
}, {
html: "col 3, row 2"
}, {
html: "col 3, row 3"
}, {
html: "col 4, row 0"
}, {
html: "col 4, row 1"
}, {
html: "col 4, row 2"
}, {
html: "col 4, row 3"
}, {
html: "col 5, row 0"
}, {
html: "col 5, row 1"
}, {
html: "col 5, row 2"
}, {
html: "col 5, row 3"
}, {
html: "col 6, row 0"
}, {
html: "col 6, row 1"
}, {
html: "col 6, row 2"
}, {
html: "col 6, row 3"
}, {
html: "col 7, row 0"
}, {
html: "col 7, row 1"
}, {
html: "col 7, row 2"
}, {
html: "col 7, row 3"
}, {
html: "col 8, row 0"
}, {
html: "col 8, row 1"
}, {
html: "col 8, row 2"
}, {
html: "col 8, row 3"
}, {
html: "col 9, row 0"
}, {
html: "col 9, row 1"
}, {
html: "col 9, row 2"
}, {
html: "col 9, row 3"
}, {
html: "col 10, row 0"
}, {
html: "col 10, row 1"
}, {
html: "col 10, row 2"
}, {
html: "col 10, row 3"
}, {
html: "col 11, row 0"
}, {
html: "col 11, row 1"
}, {
html: "col 11, row 2"
}, {
html: "col 11, row 3"
}, {
html: "col 12, row 0"
}, {
html: "col 12, row 1"
}, {
html: "col 12, row 2"
}, {
html: "col 12, row 3"
}, {
html: "col 13, row 0"
}, {
html: "col 13, row 1"
}, {
html: "col 13, row 2"
}, {
html: "col 13, row 3"
}, {
html: "col 14, row 0"
}, {
html: "col 14, row 1"
}, {
html: "col 14, row 2"
}, {
html: "col 14, row 3"
}, {
html: "col 15, row 0"
}, {
html: "col 15, row 1"
}, {
html: "col 15, row 2"
}, {
html: "col 15, row 3"
}, {
html: "col 16, row 0"
}, {
html: "col 16, row 1"
}, {
html: "col 16, row 2"
}, {
html: "col 16, row 3"
}, {
html: "col 17, row 0"
}, {
html: "col 17, row 1"
}, {
html: "col 17, row 2"
}, {
html: "col 17, row 3"
}, {
html: "col 18, row 0"
}, {
html: "col 18, row 1"
}, {
html: "col 18, row 2"
}, {
html: "col 18, row 3"
}, {
html: "col 19, row 0"
}, {
html: "col 19, row 1"
}, {
html: "col 19, row 2"
}, {
html: "col 19, row 3"
}, {
html: "col 20, row 0"
}, {
html: "col 20, row 1"
}, {
html: "col 20, row 2"
}, {
html: "col 20, row 3"
}, {
html: "col 21, row 0"
}, {
html: "col 21, row 1"
}, {
html: "col 21, row 2"
}, {
html: "col 21, row 3"
}, {
html: "col 22, row 0"
}, {
html: "col 22, row 1"
}, {
html: "col 22, row 2"
}, {
html: "col 22, row 3"
}, {
html: "col 23, row 0"
}, {
html: "col 23, row 1"
}, {
html: "col 23, row 2"
}, {
html: "col 23, row 3"
}, {
html: "col 24, row 0"
}, {
html: "col 24, row 1"
}, {
html: "col 24, row 2"
}, {
html: "col 24, row 3"
}, {
html: "col 25, row 0"
}, {
html: "col 25, row 1"
}, {
html: "col 25, row 2"
}, {
html: "col 25, row 3"
}, {
html: "col 26, row 0"
}, {
html: "col 26, row 1"
}, {
html: "col 26, row 2"
}, {
html: "col 26, row 3"
}, {
html: "col 27, row 0"
}, {
html: "col 27, row 1"
}, {
html: "col 27, row 2"
}, {
html: "col 27, row 3"
}, {
html: "col 28, row 0"
}, {
html: "col 28, row 1"
}, {
html: "col 28, row 2"
}, {
html: "col 28, row 3"
}, {
html: "col 29, row 0"
}, {
html: "col 29, row 1"
}, {
html: "col 29, row 2"
}, {
html: "col 29, row 3"
}, {
html: "col 30, row 0"
}, {
html: "col 30, row 1"
}, {
html: "col 30, row 2"
}, {
html: "col 30, row 3"
}, {
html: "col 31, row 0"
}, {
html: "col 31, row 1"
}, {
html: "col 31, row 2"
}, {
html: "col 31, row 3"
}, {
html: "col 32, row 0"
}, {
html: "col 32, row 1"
}, {
html: "col 32, row 2"
}, {
html: "col 32, row 3"
}, {
html: "col 33, row 0"
}, {
html: "col 33, row 1"
}, {
html: "col 33, row 2"
}, {
html: "col 33, row 3"
}, {
html: "col 34, row 0"
}, {
html: "col 34, row 1"
}, {
html: "col 34, row 2"
}, {
html: "col 34, row 3"
}, {
html: "col 35, row 0"
}, {
html: "col 35, row 1"
}, {
html: "col 35, row 2"
}, {
html: "col 35, row 3"
}, {
html: "col 36, row 0"
}, {
html: "col 36, row 1"
}, {
html: "col 36, row 2"
}, {
html: "col 36, row 3"
}, {
html: "col 37, row 0"
}, {
html: "col 37, row 1"
}, {
html: "col 37, row 2"
}, {
html: "col 37, row 3"
}, {
html: "col 38, row 0"
}, {
html: "col 38, row 1"
}, {
html: "col 38, row 2"
}, {
html: "col 38, row 3"
}, {
html: "col 39, row 0"
}, {
html: "col 39, row 1"
}, {
html: "col 39, row 2"
}, {
html: "col 39, row 3"
}, {
html: "col 40, row 0"
}, {
html: "col 40, row 1"
}, {
html: "col 40, row 2"
}, {
html: "col 40, row 3"
}, {
html: "col 41, row 0"
}, {
html: "col 41, row 1"
}, {
html: "col 41, row 2"
}, {
html: "col 41, row 3"
}, {
html: "col 42, row 0"
}, {
html: "col 42, row 1"
}, {
html: "col 42, row 2"
}, {
html: "col 42, row 3"
}, {
html: "col 43, row 0"
}, {
html: "col 43, row 1"
}, {
html: "col 43, row 2"
}, {
html: "col 43, row 3"
}, {
html: "col 44, row 0"
}, {
html: "col 44, row 1"
}, {
html: "col 44, row 2"
}, {
html: "col 44, row 3"
}]
}]
}]
}]
}, {
region: "west",
title: "tree",
html: "tree content",
width: 200
}]
}]
}, {
region: "north"
}, {
region: "south"
}]
});
}
);




</script>
</body>
</html>

jsakalos
22 Nov 2011, 2:41 AM
First, make sure that IE is not running in a compatibility mode - it is not supported. AFAIK, IE defaults to a compatibility mode when url points to localhost.

Jeff Liotta
28 Nov 2011, 1:16 PM
Yes, IE is not running in compatibility mode, but still the issue remains in standards mode.

jsakalos
29 Nov 2011, 3:16 AM
I've run it in IE9 with Ext 4.0.7 and the scrollbar is missing as you describe. jslint.com is happy with your code so it looks like a bug.

Now, I can move this thread to bugs or you can wait until Ext 4.1 that will have layout engine reworked and the completely new scrolling logic.

Jeff Liotta
29 Nov 2011, 2:11 PM
Yes please move this to the bugs section. Can you either give the link to the bug id created or make me as a watcher.
Meanwhile do you suggest any work arounds?

jsakalos
30 Nov 2011, 4:35 AM
You'll stay subscribed to the thread you created even if it it's been moved to another forum, I suppose.