.NET Performance Blog

April 12, 2006

Bug Fix: SELECT box displayed through Dynamic DIV in Internet Explorer

Filed under: Bug Fix — Eric P @ 9:05 am

There is a common bug that occurs when there is DIV (with absolute positioning) being displayed in front of SELECT html control. The SELECT control stays visible even with the div over it. It has to do with windowed controls (like SELECT) taking Z-Index precedence over any non-windowed control. The bug only occurs in Internet Explorer. To read more about it check out the following link

I create an example that contains both the bug and the fix at
this url.

The Fix
To fix the issue I basically create a new IFrame with the same dimensions and at the same position as Popup Div. Then I store IFrame object in a variable so I can destroy it when div is hidden.

Here is the complete code:

<script language="javascript">
<!–

var g_PopupIFrame;

function IsIE()
{

return ( navigator.appName=="Microsoft Internet Explorer" );

}

function HidePopupDiv(divID)
{

var divPopup;
divPopup=document.getElementById(divID);
divPopup.style.visibility = "hidden";

if (IsIE())
{

document.body.removeChild(g_PopupIFrame);
g_PopupIFrame=null;

}

}

function ShowPopupDiv(divID)
{

var divPopup=document.getElementById(divID);

if (!IsIE())
{

//Just display the div
divPopup.style.visibility ="visible";
return;

}

//Increase default zIndex of div by 1, so that DIV appears before IFrame
divPopup.style.zIndex=divPopup.style.zIndex+1;

var iFrame = document.createElement("IFRAME");
iFrame.setAttribute("src", "");

//Match IFrame position with divPopup
iFrame.style.position="absolute";
iFrame.style.left =divPopup.offsetLeft + 'px';
iFrame.style.top =divPopup.offsetTop + 'px';
iFrame.style.width =divPopup.offsetWidth + 'px';
iFrame.style.height =divPopup.offsetHeight + 'px';

document.body.appendChild(iFrame);

//Store iFrame in global variable, so it can get removed when divPopup is hidden g_PopupIFrame=iFrame;
divPopup.style.visibility ="visible";

}

//–>
</script>

Issue With SSL

There is an issue using IFrame with src="" on SSL pages. User will get a security warning whenever popup div is displayed and IFrame is created. Full description of the issue is here.

To work around this problem create an empty html page – "Blank.htm". Then replace line

iFrame.setAttribute("src", "");

with

iFrame.setAttribute("src", "/Blank.htm");

//Use correct absolute path for Blank.htm

Advertisements

5 Comments »

  1. […] I did not want to modify all the pages and place the select’s in a “less user friendly” location, nor did I want to change the menu system that users were comfortable with.  With a fair amount of researching the issue, I found a potential solution.  That was the “Iframe Select Box Hack and Bug Fix”.  Here is a version using JavaScript to create the Iframe and get ride of it when you don’t need it here is the Javascirpt Iframe link. […]

    Pingback by Internet Explorer HACK/Fix For Select Box Showing through DIV — JavaScript Junkie — June 14, 2007 @ 10:42 pm | Reply

  2. […] on what version of IE you have.  If you are dealing with IE 5.5 or earlier, you need to create a blank IFRAME under your div.  If you are dealing with IE 6, you need to surround the control with a div, and hide it when […]

    Pingback by Berin Loritsch: IE 6 and Select Boxes | Server software — July 11, 2007 @ 1:45 pm | Reply

  3. […] on what version of IE you have.  If you are dealing with IE 5.5 or earlier, you need to create a blank IFRAME under your div.  If you are dealing with IE 6, you need to surround the control with a div, and hide it when […]

    Pingback by Software Artisan : IE 6 and Select Boxes — July 19, 2007 @ 11:23 pm | Reply

  4. The select box issue got fixed in IE.

    If there is a flash, the flash appears above the div layer.
    With the same select box fix code, the flash issue got resolved in IE. But in mozilla, the flash still appears above the div. Any solution for this?

    Comment by terene — January 4, 2008 @ 7:58 am | Reply

  5. When we activate the show hide of the popup rapidly, lots of IFRAME gets created on the page and do not go away. To fix that we can modify the code as shown below:

    if(!g_PopupIFrame)
    iFrame= document.createElement(“IFRAME”);
    else
    iFrame = g_PopupIFrame;

    iFrame.setAttribute(“src”, “”);

    //Match IFrame position with objTipLayer
    iFrame.style.position=”absolute”;
    iFrame.style.left =objTipLayer.offsetLeft + ‘px’;
    iFrame.style.top =objTipLayer.offsetTop + ‘px’;
    iFrame.style.width =objTipLayer.offsetWidth + ‘px’;
    iFrame.style.height =objTipLayer.offsetHeight + ‘px’;

    if(!g_PopupIFrame)
    document.body.appendChild(iFrame);

    Comment by jasu00 — January 17, 2009 @ 4:32 am | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: