CODEWITHSUNDEEP
jquerycsspdfiframe
Lima
Lima

Reputation: 1211

IFRAME appearing in front of DIV

I have an ASP.NET site which has a Ajax Control Toolkit Animation Extender to animate a div flying out. The div contains a simple treeview.

When the user selects a node in the treeview a protected sub is fired which sets the source of an IFRAME on the page to another aspx page:

Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TreeView1.SelectedNodeChanged
    if1.Attributes.Add("src", "Open.aspx")
    if1.Style.Add("z-index", "-1")
    if1.Style.Add("position", "absolute")
End Sub

In the open.aspx page I am simply reading the PDF file into a byte stream:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Response.Clear()
    Response.ContentType = "application/pdf"
    Dim xByteStream(1) As Byte
    Dim b = File.ReadAllBytes(Server.MapPath("reportFrameset.pdf"))
    Response.BinaryWrite(b)
    Response.End()
End Sub

The problem I am having is before the iframe loads the PDF the div appears on top of the iframe but as soon as the iframe calls open.asmx and the pdf is opened then the div appears behind the iframe. enter image description here

I have tried putting the two components (link button + menu div and iframe) inside two different div's and setting them to position: absolute or relative and setting the z-index of -1 for the iframe div and 999 for the link button + menu div however this doesn't seem to have changed anything.

<div style="position:absolute; top:50px; left:20px; z-index:-1; width:400px; height:300px;">
  <iframe id="if1" name="if1" width="100%" height="50px" runat="server">
  </iframe> 
</div>

So what I am wanting is for the menu to appear on top of the iframe which has a PDF loaded.

If it helps I have uploaded a copy of the website project to DropBox, it is in Visual Studio 2008 format: https://www.dropbox.com/s/6vjl1m81m0e1ib9/WebApplication2.zip

Upvotes: 1

Views: 806

Answers (1)

Lima
Lima

Reputation: 1211

After posting the question I came across z-index does not work in Internet Explorer with pdf in iframe.

The solution provided by Jordan Gray worked for my test site, when implementing it in my actual site with other CSS and elements it didn't work. I have spent far too much time on this so have gone for a much simpler solution.

Thanks San for your time in helping me.

Upvotes: 1

Related Questions