Why does a non-dynamically created iframe shim show, but a dynamically created one does not?

Question

I have a custom control that is made up of a text field and the ajax control toolkit dateextender. In IE6 I'm hitting the z-index bug where the calendar is showing behind select boxes.

If I have the shim sitting in the control, initially hidden, it seems to display fine when the calendar is shown, but when I try to dynamically create the shim on showing it doesn't appear.

I've tried bgiframe and some examples I found on SO, no luck.

Here is my javascript code currently...

var dateEditorShim;

function dateEditor_OnShown(dateControl, emptyEventArgs) {
    var shimWidth = dateControl._width;
    var shimHeight = dateControl._height;

    //var dateEditorShim;
    //dateEditorShim = document.getElementById(dateEditorShimId);

    dateEditorShim = document.createElement('iframe');
    dateEditorShim.setAttribute('src', 'javascript:"";');
    dateEditorShim.setAttribute('frameBorder', '0');

    dateEditorShim.style.width = dateControl._popupDiv.offsetWidth;
    dateEditorShim.style.height = dateControl._popupDiv.offsetHeight;
    dateEditorShim.style.top = dateControl._popupDiv.style.top;
    dateEditorShim.style.left = dateControl._popupDiv.style.left;
    dateControl._popupDiv.style.zIndex = 999;
    dateEditorShim.style.zIndex = 998;
    dateEditorShim.style.display = "block";

}


function dateEditor_OnHiding(dateControl, emptyEventArgs) {
    var shimWidth = 0;
    var shimHeight = 0;

    //var dateEditorShim;
    //dateEditorShim = document.getElementById(dateEditorShimId);
    dateEditorShim.style.width = 0;
    dateEditorShim.style.height = 0;
    dateEditorShim.style.top = 0;
    dateEditorShim.style.left = 0;
    dateEditorShim.style.display = "none";
}

You'll notice I have a commented out bit of code that gets an iframe that is embedded into the page, as I said, in this case the iframe at least shows up, but when I dynamically create it like the code above currently, it doesn't. I'm trying to figure out why.

Any ideas?

Answer 1

Um - what position are you giving it? Absolute?

Answer 2

Well, I figured it out. I simply needed to append the element to something. So...

dateControl._container.appendChild(dateEditorShim);

Did the trick.