Entry
How to overcome IE's reluctance to redraw a SELECT when it gets clipped/unclipped?
May 2nd, 2000 09:40
Martin Honnen, siddharth khare,
In IE4/5 SELECT elements are windowed elements meaning they are on top
z level meaning they could overlay layers even if not wanted. One way
to overcome that is to clip the SELECT (which requires it to be
absolutely positioned) so that it doesn't overlay the layer. IE seems
however to be buggy redrawing the SELECT when you repeatedly
clip/unclip it. You can overcome that by inserting a dummy element
whose visibility you toggle when you clip the SELECT:
<HTML>
<HEAD>
<SCRIPT>
var clipped = false;
function clipUnclip () {
if (clipped) {
if (document.all) {
document.formName.aSelect.style.clip =
'rect(auto auto auto auto)';
document.all.dummy.style.visibility = 'visible';
}
}
else {
if (document.all)
document.formName.aSelect.style.clip =
'rect(auto 100px auto auto)';
document.all.dummy.style.visibility = 'hidden';
}
clipped = !clipped;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<SELECT NAME="aSelect" STYLE="position: absolute;">
<OPTION>Some very wiiiiiiiiiiiiiiiidddddddddeeeeeee option
<OPTION>Kibology
</SELECT>
<BR>
<BR>
<INPUT TYPE="button" VALUE="clip/unclip select"
ONCLICK="clipUnclip();"
>
</FORM>
<SPAN ID="dummy" STYLE="position: absolute;">
</SPAN>
</BODY>
</HTML>
