PDA

View Full Version : [RESOLVED] Shadow z-index



jsakalos
8 Jun 2007, 10:10 AM
The shadow el is pulled from shadow pool and inserted before the element the shadow is for (file Shadow.js):



if(!this.el){
this.el = Ext.Shadow.Pool.pull();
if(this.el.dom.nextSibling != target.dom){
this.el.insertBefore(target);
}
}
The z-index of shadow is calculated then as follows:



this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
In some (rare?) cases the target has zIndex === undefined/auto and this.zIndex is set to a high number. This leads to displaying the shadow over the element.

Proposed solution:


this.zIndex = parseInt(target.getStyle("z-index"), 10)-1;
this.zIndex = isNaN(this.zIndex) ? 'auto' : this.zIndex;
this.el.setStyle('z-index', this.zIndex)

jack.slocum
8 Jun 2007, 9:18 PM
You can't use a shadow with an element that doesn't have a z-index. The proper solution in this case would be to set a z-index on the element being shadowed?

jsakalos
9 Jun 2007, 1:39 AM
I understand; it's by design.

This leads to the question: Is there a method to get the effective z-index of an element, w/o scanning parents, if it was not the explicitly set? (I looked to "computed styles" in Firebug and is says "auto".)

Because, if there is a simple method the workaround could get/set it, if not there should be note in doc same as for position.

Thanks for clarifying.

jack.slocum
9 Jun 2007, 3:20 PM
Not that I know of. Shadows can only be used on a positioned element, so that element would be who the shadow is associated with (and will have the z-index set). How are you using it?

jsakalos
10 Jun 2007, 1:39 AM
Not that I know of. Shadows can only be used on a positioned element, so that element would be who the shadow is associated with (and will have the z-index set). How are you using it?

I was afraid too that there is no easy way to get the effective z-index.

I use it in Accordion for panels. If the panels are part of the Accordion there is alway z-index explicitly set. But then I added independent panels w/o Accordion (no set z-index) to the same page so they occasionally pulled these high-z-indexed shadows from the pool and displayed 'em over the bodies.

This is not a showstopper; I've handled it like this:



if(shadow) {
this.shadow.show(this.el);

// fix the Ext shadow z-index bug
zindex = parseInt(this.el.getStyle('z-index'), 10);
zindex = isNaN(zindex) ? '' : zindex - 1;
this.shadow.el.setStyle('z-index', zindex);
}
else {
this.shadow.hide();
}
and it works fine as shadow is always inserted before the element so when both have "auto" z-index they display properly.

Anyway, thanks for explanation, now I know that this is by design.