[UNKNOWN][3.1] IE7/IE 8 Window with form scroll issue

[gillou01]

Ext version tested:

Ext 3.1.0


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE7
IE8



Description:

Form is corrupted when it s bigger than the window in IE 7


Test Case:



/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){

var items=[];
for(var i=0;i<100;i++) {
items[i]={
fieldLabel: 'TEST '+i,
checked:false,
xtype:'checkbox'
};
}


win = new Ext.Window({
//applyTo:'hello-win',
title:'Filter',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
modal: true,
maximizable :false,
minimizable :true,
buttonAlign : 'center',
items: {xtype: 'form',
autoScroll:true,
labelWidth: 350,
bodyStyle: 'padding:15px',
baseCls: 'x-plain',
defaults: {anchor: '95%'},
items :items
},
forceLayout:true,
buttonAlign : 'center',
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});



Steps to reproduce the problem:

I ve just modified the hello.html example



Screenshot IE 7 ad IE 8

[Animal]

items :[items]

[gillou01]

Hi Animal
It was a typo mistake (just updated the first post).
Still the same issue on IE 7 so.

Cheers

[Animal]

Ouch! That looks like a browser bug.

The <fiorm> element is correctly sized, and overflow: auto. It creates scrollbars. But the browser shows the overflowing elements. That's bad.

It works in Quirks mode (without a doctype)

[gillou01]

Yep , but if i remove it, then i have problems with IE 8 and the all compatibility thing.
Any idea ?

Cheers

[Animal]

What problems do you get in quirks mode? It should work just as well (probably better)

[gillou01]

Correct me if i am wrong, but by default, if i remove the DTD and the UAX meta tag,
IE8 browser mode is "compatibily mode IE8" on all intranet zone. document mode is quirks.

See this post : POST (http://www.extjs.com/forum/showthread.php?t=86076)

In that mode, i have small rendering issues for example with text boxes.
So i search through the forum and find out that you have to add the DTD and the META tag which does correct the problem, but then IE 7 doesnt work anymore....

Hope i am clear.

Cheers

[gillou01]

The site is on "Local Intranet", so by default IE 8 is in "Compatibility Mode IE8" which causes rendering issues, for example with combobox.
if i add the DTD and the UAX meta tag, then it works fine for IE 8, but i am facing the IE 7 issue above.
Any idea?

Cheers

[Animal]

Sorry, I don't know a solution. IE is a fekking nightmare!

[Condor]

Are you using EmulateIE7 mode?

In that case you need to fix this (http://www.extjs.com/forum/showthread.php?p=371089#post371089).

[Animal]

Why was that thread closed? Was the fix applied?

[Condor]

Why was that thread closed? Was the fix applied?

It's definitely not solved! There are several bugreports about EmulateIE7 mode and most of them have been marked [CLOSED] or [DUP], but the problem has never been properly addressed.

[gillou01]

Are you using EmulateIE7 mode?

In that case you need to fix this (http://www.extjs.com/forum/showthread.php?p=371089#post371089).

But when i do that, then i have a problem with IE 7 see first post ...

[Condor]

You can fix the IE7 problem by adding:

bodyStyle: 'padding:15px;position:relative;',

[Animal]

The x-panel-body class already applies position:relative

[Condor]

Yes, but x-plain-body doesn't (the example uses baseCls:'x-plain').

[Animal]

I wonder why x-plain-body doesn't apply that style? Is there a good reason or is that a bug in Ext's css files?