PDA

View Full Version : [FIXED-565][3.x/2.x] Shimming problem in IE



richgoldmd
25 Feb 2008, 7:57 PM
In my app, I am using a border layout. One of the panels contains an activeX control (Acrobat Reader, to be exact), which requires shimming else it shows through.

If I set Ext.useShims=true, a shim is created. However, if the div that is shimmed has borders, the right and bottom borders are not shimmed, and the underlying control shows through where these borders belong.
I observed this behavior for both a Ext.Window and an Ext.form.Combo.
If I set Ext.useShims = false, then none of the floating divs are visible where the ActiveX control sits.
Any thoughts on this?

Update:
If I disable shadows on the floating windows and combos, the shims work fine.
This is on IE7.
It appears as if the calculations for the shim (Ext.Layer#sync()) are not properly accounting for the shadow.
This appears to be true for all shadow types - the right and bottom borders exceed the shim boundaries.

richgoldmd
25 Feb 2008, 8:22 PM
Another Update:
This must be an IE bug/feature. Inspection reveals that the iframe shim position and size are identical to the shadow position and size. Nevertheless, the right and bottoms borders are not shimmed.

I can "solve" this problem by globally disabling shadows:


Ext.form.ComboBox.prototype.shadow = false;
Ext.Panel.prototype.shadow = false;



But I really like the shadows.

richgoldmd
4 Mar 2008, 6:26 AM
I tried to correct the problem via CSS, as was done to correct a similar issue for IE6, but it would not work. The size, not just the offset of the shim needs to be adjusted.

I tried the following change to the Layer code, which seems to work in IE7:



Ext.Layer.prototype.sync = function(doShow){
var sw = this.shadow;
if(!this.updating && this.isVisible() && (sw || this.useShim)){
var sh = this.getShim();
var w = this.getWidth(),
h = this.getHeight();
var l = this.getLeft(true),
t = this.getTop(true);
if(sw && !this.shadowDisabled){
if(doShow && !sw.isVisible()){
sw.show(this);
}else{
sw.realign(l, t, w, h);
}
if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts, s = sh.dom.style;
if (Ext.isIE7) {
s.left = (Math.min(l, l+a.l)+2)+"px";
s.top = (Math.min(t, t+a.t)+2)+"px";
s.width = (w+a.w + 2)+"px";
s.height = (h+a.h + 2)+"px";
} else {
s.left = (Math.min(l, l+a.l))+"px";
s.top = (Math.min(t, t+a.t))+"px";
s.width = (w+a.w)+"px";
s.height = (h+a.h)+"px";
}
}
}else if(sh){
if(doShow){
sh.show();
}
sh.setSize(w, h);
sh.setLeftTop(l, t);
}

}
};


I wish someone from the Core team would address this.

richgoldmd
4 Mar 2008, 10:36 AM
I found that this applies equally to IE6. Perhaps the IE corrections in Ext.Shadow are incorrect.

I modified my fix so that the portion that reads:



if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts, s = sh.dom.style;
if (Ext.isIE7) {
s.left = (Math.min(l, l+a.l)+2)+"px";
s.top = (Math.min(t, t+a.t)+2)+"px";
s.width = (w+a.w + 2)+"px";
s.height = (h+a.h + 2)+"px";
} else {
s.left = (Math.min(l, l+a.l))+"px";
s.top = (Math.min(t, t+a.t))+"px";
s.width = (w+a.w)+"px";
s.height = (h+a.h)+"px";
}
}
}else if(sh){



Now reads:



if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts, s = sh.dom.style;
var sa = Ext.isIE ? 2 : 0;
sh.setSize(w+a.w+sa, h+a.h+sa);
sh.setLeftTop(Math.min(l, l+a.l), Math.min(t, t+a.t));
}
}else if(sh){


and I have adjusted the css:

.ext-ie .ext-shim{filter:alpha(opacity=0);margin-left:2px;margin-top:2px;}

to account for IE7

AlexBuyn
4 Apr 2008, 12:37 AM
I've been fighting with this problem for about 6 hours! That's was very helpful
thanks!

mystix
12 Feb 2010, 9:02 AM
[ moved to 3.x Bugs from 2.x Bugs ]

in light of this post in the ux forums:
http://www.extjs.com/forum/showthread.php?p=436691#post436691


reportedly affects both 2.x and 3.x branches.

Jamie Avins
12 Feb 2010, 9:33 AM
If I can get a test case for this, I'll be happy to look at it.

richgoldmd
12 Feb 2010, 10:24 AM
A test case is attached. This test makes no attempt to fix the problem. The menu is shimmed properly in FF, but not in IE.

Thanks,

Rich

richgoldmd
12 Feb 2010, 12:53 PM
FYI this applies to IE8 also - haven't tried older versions in a while, but my recollection is that the fix didn't break anything in IE6.

Jamie Avins
18 Feb 2010, 3:15 PM
Fixed in SVN 6108. Shadows are now properly measured in all versions of IE/FF/etc.