Here's the simplest way I've found to have a floating DIV
appear to float over a SELECT element in IE (don't remember
where I found this on the web). It works in IE and
FireFox/Mozilla for me.
Create an IFRAME object, and set it's size the same as the
floating DIV, then set it's zIndex one less than that of the
DIV. In IE, the IFRAME floats over the SELECT, and the DIV
is over the IFRAME:
// ifrRef = reference to IFRAME
// DivRef = reference to content DIV
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
2) add this to the smartInputWindow() constructor:
this.floaterIframe =
document.getElementById("smartInputFloaterIframe");
3) add a function to resize the IFRAME and position it based
on the siw.floater:
function resizeSmartInputIframe() {
//hack: for some reason IE sometimes doesn't see the CSS z-index
if (siw.floater.style.zIndex <= 0) siw.floater.style.zIndex
= 2;
//show Iframe, which can float over SELECTs, but below
floater, so they both go on top of SELECT elements in IE
siw.floaterIframe.style.width = siw.floater.offsetWidth;
siw.floaterIframe.style.height = siw.floater.offsetHeight;
siw.floaterIframe.style.top = siw.floater.style.top;
siw.floaterIframe.style.left = siw.floater.style.left;
siw.floaterIframe.style.zIndex = siw.floater.style.zIndex - 1;
}//resizeSmartInputIframe()
4) add two calls to resizeSmartInputFrame():
A. in modifySmartInputBoxContent()
B. in showSmartInputFloater()
5) after the call at in 4)B above, also set the IFRAME
display and visibility properties.
6) modify hideSmartInputFloater() to hide the IFRAME as well.
That's all I did, small changes and one basic function. The
smart input list now floats over SELECT elements in IE for me.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Logged In: YES
user_id=248425
interesting, i went to your page in Safari (OS X) and wick did appear above
the select fields. i'll have to look into it in other browsers.
you've very nicely customized the kit! very cool!
good bug! thanks!
Logged In: YES
user_id=1009100
Here's the simplest way I've found to have a floating DIV
appear to float over a SELECT element in IE (don't remember
where I found this on the web). It works in IE and
FireFox/Mozilla for me.
Create an IFRAME object, and set it's size the same as the
floating DIV, then set it's zIndex one less than that of the
DIV. In IE, the IFRAME floats over the SELECT, and the DIV
is over the IFRAME:
// ifrRef = reference to IFRAME
// DivRef = reference to content DIV
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
Logged In: NO
I have the same issue and was going to post the it. Could
something like z-oder fix this? thinking out loud...
Logged In: YES
user_id=1009100
I fixed it in IE (and didn't break it in Firefox, don't have
a Mac to try Safari).
In case I have trouble attaching my modified file, here are
the diffs:
1) add this to the document.write() that adds the floating
table:
<iframe id="smartInputFloaterIframe"
name="smartInputFloaterIframeName" class="floater"
src="about:blank" scrolling="no" frameborder="0"></iframe>
2) add this to the smartInputWindow() constructor:
this.floaterIframe =
document.getElementById("smartInputFloaterIframe");
3) add a function to resize the IFRAME and position it based
on the siw.floater:
function resizeSmartInputIframe() {
//hack: for some reason IE sometimes doesn't see the CSS z-index
if (siw.floater.style.zIndex <= 0) siw.floater.style.zIndex
= 2;
//show Iframe, which can float over SELECTs, but below
floater, so they both go on top of SELECT elements in IE
siw.floaterIframe.style.width = siw.floater.offsetWidth;
siw.floaterIframe.style.height = siw.floater.offsetHeight;
siw.floaterIframe.style.top = siw.floater.style.top;
siw.floaterIframe.style.left = siw.floater.style.left;
siw.floaterIframe.style.zIndex = siw.floater.style.zIndex - 1;
}//resizeSmartInputIframe()
4) add two calls to resizeSmartInputFrame():
A. in modifySmartInputBoxContent()
B. in showSmartInputFloater()
5) after the call at in 4)B above, also set the IFRAME
display and visibility properties.
6) modify hideSmartInputFloater() to hide the IFRAME as well.
That's all I did, small changes and one basic function. The
smart input list now floats over SELECT elements in IE for me.
Logged In: NO
Could somebody post a working example of this (with the
Iframe)?
Thanks!
Logged In: NO
gwoosley's post on 2005-07-20 13:58
works, confirmed in Firefox, IE 6, and Safari