[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1758
  • Last Modified:

iFrame shim under div

Hello,

There is a technique that can be used to overcome the infinite z-index of windowed controls, so that a div with a z-index greater than page level can be seen above the control, and the control does not show through (the classic problem). This fix involves shimming an iFrame under the div (for IE5.5+ only).

So far so good and it works well. Question is, if the control is a select box, this is hidden as it should be, but if the dropdown arrow part is showing outside of the div and then is clicked on, the list shows above the div and iFrame, just as though only the select box itself was hidden, and not the actual drop-down list.

Does anyone know why the rule is broken in this case and have a fix?

Thanks

Joe

0
darkhorse0
Asked:
darkhorse0
  • 4
  • 2
1 Solution
 
0h4crying0utloudCommented:

Can you provide a simple example or link to an example?
0
 
darkhorse0Author Commented:
Yes, I will modify the msdn example of the windowless iFrame behaviour and post the code (will take some time but please check back and thanks for responding)
0
 
darkhorse0Author Commented:
Hi,

Run the page below; by default the select control is at 0 zindex, and the iframe at 5. The iframe will appear over the select as expected (even before the iFrame became windowless) but in IE 5.5+ the zindex of the iframe follows both the select and the div zindex rules and so the div can be set to 6 and appear above the iframe, thus hiding the control.

I moved things about to show what I mean, you can see when you load the page that the iframe is above the select as it should be. Just click on the select arrow to drop it down, you see that the part which drops down is *above* the iframe.









<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
      div1.style.zIndex=text1.value;
      select1.style.zIndex=text2.value;
      getindexes();
}

function getindexes(){

      text1.value=div1.style.zIndex;
      text2.value=select1.style.zIndex;
      text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">

Div
<input type="text" value="" id=text1 name=text1 ><p>

Select
<input type="text" value="" id=text2 name=text2><p>

IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1  style="width:200;height:200;background-color:blue;
position:absolute;left:350;top:350;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:"
size=1 >
      <option>Option1
      <option>Option2
      <option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:155;position:absolute;
left:400;top:350;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
zawedikianCommented:
hi dear

i had this problem not long time ago, and there s no direct solution for it.
so here s what i did:

i explicitly told the drop down to become hidden when i want smg to be on top of it. In other words, when for example the layer is visible, you have to put a javascript function onLoad or onClick or whatever.. and in this function u put:
document.getElementbyid("select1").style.visibility = "hidden"

and then also on the close of the layer or any other action you want you should do the same with:
document.getElementbyid("select1").style.visibility = "visible"

if u need more help, tell me

zeina
0
 
darkhorse0Author Commented:
Hi zawedikian , thanks for responding

So you did'nt use an iframe at all to cover the control? Or you did but were not happy with the drop down part still showing?

Thanks

Joe

0
 
zawedikianCommented:
hi joe

no actually i didn't use a frame at all to cover it. if u r using the frame just to cover this control, there s really no need for it. you can just do what i told u: on the action of a control that should come over the drop down, hide it then on the reverse action, show it again.

and even if you need the frame, try to find a way to use the visibility property because it is the only solution under IE6 or less. but note that i heard that the problem of the z-index is solved for drop downs in the IE7 (that has problems!).

zeina
0
 
darkhorse0Author Commented:
Hi zeina,

Understood, the iframe is needed but I think I can find a way to combine that and the hiding method you suggest. In any case, a complete solution based on iframe is clearly not possible.

As for IE7, I don't even want to think about that yet :) And the difficulty of installing multiple versions of IE make it impossible to test them like you can with gecko browsers (none of which have this problem in the first place!)

Thanks for your help,

Joe

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now