Thursday, February 28, 2008

How to fix Overlapping of select box in IE6

In IE, the select box appear on top of other elements even if you set zIndex property to higher value. I found this solution in controls.js of scriptaculous framework. I just follow their code and make it simple for me to use it.

To solve this problem, you need to create an iframe, append it below your div container, clone the position between these two, and set zIndex of that iframe to 1 and zIndex of your div container to 2. This will solve the problem, but it is not still good. IE seems to a little bit stuck about a few seconds when creating this type of iframe. Therefore, from my opinion, you should place an iframe tag on html is better. Then, you just call fixIE() function. But make sure that iframe and your div container have the same immediate parent node.


function fixIE(element, element_iefix) {
Position.clone(element, element_iefix, {setTop:(!element.style.height)});
element_iefix.style.zIndex = 1;
element.style.zIndex = 2;
Element.show(element_iefix);
}

//req: element must be position absolute.
function fixIEOverlapping(element) {
if($(element.id + '_iefix')) {
fixIE(element, $(element.id + '_iefix'));
}

if((navigator.appVersion.indexOf('MSIE')>0)
&& (navigator.userAgent.indexOf('Opera')<0)
&& (Element.getStyle(element, 'position') == 'absolute')
&& !$(element.id + '_iefix')) {
new Insertion.After(element.id,
'<iframe id="' + element.id + '_iefix" ' +
'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');

setTimeout(function() {
fixIE(element, $(element.id + '_iefix'));
}, 50);
}
}


In order to use it, just call fixIEOverlapping($("myDiv"));

5 comments:

socketz said...

You're the master! Thanks

linty said...

Stupid question, I know, but how should I go about "calling" the javascript. I know you put the code there, but where do I put that in my page, in what context.... Thanks!

chamnap said...

Well, just put these 2 functions in a head section or made them in a single file, then you call use in the page wherever and whenever after the page is fully finished loading. Thanks

Srikrishna said...

I'll put the code.. but at the same time which framework I need to call here

chamnap said...

Here, I use Prototype JS Framework. However, you could rewrite into the pure javascript.

Subscribe in a Reader