PDA

View Full Version : IE7 : positioned items don't scroll in dataview



hyponym
25 Aug 2010, 11:47 PM
Hi,


When when using position:relative in xtemplate classes those items with that class attached don't scroll with the rest of the component.

I first noticed this whilst using position:relative to clear opacity filters for an embedded IE project (don't ask :) but found a workaround.

To repeat it use:

CSS:



#aItem{background-color:#999999;}
.aPanel{background-color:#eeeeee;margin-bottom:50px;}
.aInfo{position:relative;left:10px:top:20px;padding:20px;}
.aTitle{font-size:48px;}
.aCopy{font-size:28px;}
JS:


Ext.onReady(function () {

var aData = [
{
"title" : "Title1",
"desc" : "text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>"
},
{
"title" : "Title 3",
"desc" : "text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>"
},
{
"title" : "Title 3",
"desc" : "text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>"

}

];

var aStore = new Ext.data.JsonStore({
data : aData,
fields : [
{name : "title"},
{name : "desc"}
]
});


var aTpl = new Ext.XTemplate(
'<div id="aItem" style="height:100%;">',
'<tpl for=".">',
'<div class="aPanel">',
'<div class="aInfo">',
'<div class="aTitle copy">{title}</div>',
'<div class="aCopy copy">{desc}</div>',
'</div>',
'</div>',
'</tpl>',
'</div>'
);


var aPanel = new Ext.Panel({
id : 'aView',
layout : 'anchor',
border : false,
baseCls : 'x-plain',
defaults : { autoScroll:true },
items : new Ext.DataView({
id : 'aItems',
itemSelector: 'div.aPanel',
autoscroll : true,
anchor : '100%, 100%',
store : aStore,
tpl : aTpl
})
});




var viewport = new Ext.Viewport({
layout : 'border',
id : 'viewPort',
renderTo: Ext.getBody(),
items: [
new Ext.Panel({
region : 'north',
height : 30,
html : 'header guff',
collapsible : false
}),
new Ext.Panel({
region : 'south',
html : 'footer guff',
height : 30,
border : false,
collapsible : false
}),
new Ext.Panel({
title : 'center panel',
id : 'contentDiv',
layout : 'fit',
border : false,
region : 'center',
items : [ aPanel ]
})
]
});
/* // disabled as it happens without cufon
Cufon.now();
Cufon.set('fontFamily', 'Gill Sans');
Cufon.replace('.copy');
*/

});
Now I am using cufon as part of a simple dataview (using autoscroll:true).

This works fine apart from items rendered by cufon don't scroll because they have a position:absolute css value.

Anyone know an override?

tks,

Julian