PDA

View Full Version : [CLOSED-135][3.0.0] ListView double scrollbars with IE7 quirks mode



martinjrb
13 Aug 2009, 6:11 AM
Hi, I tried implementing this fix but I still get no scrollbars in IE6 or 7 in my listview. I'm using Ext 3.0.0. Here's an example:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ListView Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
.x-list-body {
height: 100%;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"> </script>
<script type="text/javascript">
Ext.onReady(function () {

new Ext.TabPanel({
id: 'tabPanel',
region: 'center',
height: 200,
width:200,
activeTab:0,
layoutOnTabChange: true,
renderTo: 'content',
items: [{
xtype: 'listview',
title: 'Tab',
columns: [{
header: 'Column 1',
width: 0.5,
sortable: true,
dataIndex: 'Column1'
}, {
header: 'Column 2',
width: 0.5,
sortable: true,
dataIndex: 'Column2'
}],
store: new Ext.data.Store({
autoLoad: true,
data: {
Rows: [{
Id: '1',
Column1: 'row1',
Column2: 'row1'
}, {
Id: '2',
Column1: 'row2',
Column2: 'row2'
}, {
Id: '3',
Column1: 'row3',
Column2: 'row3'
}, {
Id: '4',
Column1: 'row4',
Column2: 'row4'
}, {
Id: '5',
Column1: 'row5',
Column2: 'row5'
}, {
Id: '6',
Column1: 'row6',
Column2: 'row6'
}, {
Id: '7',
Column1: 'row7',
Column2: 'row7'
}, {
Id: '8',
Column1: 'row8',
Column2: 'row8'
}, {
Id: '9',
Column1: 'row9',
Column2: 'row9'
}]
},
reader: new Ext.data.JsonReader({
root: 'Rows',
idProperty:'Id'
}, [{
name: 'Column1'
}, {
name: 'Column2'
},{
name: 'Id'
}])
})
}]
})
})
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script>
<!-- EXAMPLES --><h1>ListView Example</h1>
<div id="content">

</div>
</body>
</html>
Does anyone have any ideas?

Thanks,
Martin

mjlecomte
15 Aug 2009, 9:32 AM
I copied your post from another thread because I noticed another problem. I see two scrollbars if using IE7 in quirks mode.

Animal
15 Aug 2009, 10:06 AM
The x-list-body cannot be height:100%. It gets its height set exactly in latest code.

Having said that, if you are using the latest code, that that setting will override that style rule, so... still something funny there.

Animal
15 Aug 2009, 10:09 AM
I don't get two scrollbars in that example with latest code.

But in IE Quirks mode I do see those headers stacking up instead of floating across...

mjlecomte
15 Aug 2009, 2:00 PM
I don't get two scrollbars in that example with latest code.

I wonder if difference is the old problem of XP having fat scrollbars.

Output says my scrollbars are 17 pixels wide at both of these:
http://4umi.com/web/javascript/scrollbar.php
http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

Animal
16 Aug 2009, 12:27 AM
I don't think so. On IE in quirks mode, the elements which are supposed to flow scross are stacking up on each other. You see the headers are on top of each other and the data cells are on top of each other.

I think it's something to do with the IE zoom CSS property, but haven't been able to track it down yet.

silvaros
26 Aug 2009, 12:56 PM
Funny that I don't get scrollbars at all when I run this example in FF or IE7.
Anyone know what might cause this?

Edit : Sorry, just found this : http://extjs.net/forum/showthread.php?t=74230&page=1

aconran
12 Nov 2009, 10:35 AM
I don't think so. On IE in quirks mode, the elements which are supposed to flow scross are stacking up on each other. You see the headers are on top of each other and the data cells are on top of each other.

I think it's something to do with the IE zoom CSS property, but haven't been able to track it down yet.

Whats happening in IE is this... the headers .x-list-header-inner width is calculated to 179px, this is the parent element to each of the actual header elements. We are using % widths within the browser.

So calculate the percentage widths...
179 * 0.5 = 89.5px which rounds to 90px
179 * 0.5 = 89.5px which rounds to 90px

90 + 90 > 179 and therefore it overflows and then stacks.

We're currently looking into ways of fixing this like manually calculating the pixels vs allowing the browser to calculate them. At this point the concern is to make sure that the performance is the same.