title: jQuery datepicker; hidden by PDF Viewer in Internet Explorer
body: <p>What my page does: </p>
  
  <p>The user selects a report, selects some parameters and then click the preview button, which calls crystal reports to run the report and export the result as a PDF. I have a DIV that has an object tag to display the PDF file.</p>
  
  <p>They can then setup a schedule to run the report automatically for them. This schedule section uses the datepicker to select start and end dates for the schedule.</p>
  
  <p>When displaying a PDF (in IE) the datepicker is blocked. If the object displays a simple HTML file the datepicker overlays just fine. So it is something about the PDF viewer that is demanding it be the top most element.</p>
  
  <p>Here is a simple test I am using: </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" /&gt;
          &lt;link href="styles/timepicker.css" rel="stylesheet" type="text/css" /&gt;
  
          &lt;script src="scripts/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="scripts/jquery-timepicker.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="scripts/jquery.bgiframe.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
          &lt;script type="text/javascript"&gt;
  
              $(document).ready(function() {
                  $('#txtStartDate').datepicker({minDate: new Date()});
                  $('#txtEndDate').datepicker({minDate: new Date()});
                  $('#txtTime').timepicker();
              });
  
          &lt;/script&gt;        
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="mainForm"&gt;
              &lt;div id="divSchedule" style="z-index:2;font-family:Arial;font-size:8.5pt"&gt;
                  &lt;table cellpadding="3px" cellspacing="0" style="width:600px;display:block;padding: 0px 3px 0px 0px"&gt;
                      &lt;tr&gt;&lt;td colspan="7"&gt;&lt;div style="width:100%;border-bottom:1px solid #F3C13D;color:#0067AC"&gt;Schedule automated report delivery&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;span&gt;Start Date:&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="txtStartDate" type="text" style="width:70px"/&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span&gt;End Date:&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="txtEndDate" type="text" style="width:70px"/&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span&gt;Time:&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="txtTime" style="width:70px"/&gt;&lt;/td&gt;
                          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;
                              &lt;span&gt;via:&lt;/span&gt;
                              &lt;input type="radio" name="rdoScheduleVia" value="Printer"&gt;Printer&amp;nbsp;
                              &lt;input type="radio" name="rdoScheduleVia" value="Email"&gt;Email
                          &lt;/td&gt;
                          &lt;td&gt;&lt;span id="lblViaText"&gt;Printer Name:&lt;/span&gt;&lt;/td&gt;
                          &lt;td colspan="3"&gt;&lt;input id="txtViaText" style="width:235px"/&gt;&lt;/td&gt;
                          &lt;td&gt; 
                              &lt;input type="button" ID="btnPrinterName"  value="Select Printer" Class="LoginButton" Width="115px" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan="5"&gt;
                               &lt;div style="widht:100%;align:right"&gt;&lt;input type="button" ID="btnSaveSchedule"  Class="LoginButton" value="Save" /&gt;&lt;/div&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                               &lt;input type="button" ID="btnCancel"  Class="LoginButton" value="Cancel" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div id="divPDFView" style="z-index:1;height:300px;witdh:400px;border:1px solid blue"&gt;
                  &lt;object ID="objPrevReport" data="test.pdf" type="application/pdf" style="position:relative;z-index:-1;width:100%;height:100%"&gt;
                      alt : &lt;a href="test.pdf"&gt;test.pdf&lt;/a&gt;
                  &lt;/object&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>Section of jQuery-ui-1.8.12. Custom. Css for the datepicker that I changed the z-index to 10 in</p>
  
  <pre><code>/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
  
  . Ui-datepicker-cover {
  
      display: none; /*sorry for IE5*/
  
      display/**/: block; /*sorry for IE5*/
  
      position: relative; /*must have*/
  
      z-index: 10; /*must have*/
  
      filter: mask(); /*must have*/
  
      top: -4px; /*must have*/
  
      left: -4px; /*must have*/
  
      width: 200px; /*must have*/
  
      height: 200px; /*must have*/
  
  }/*
  </code></pre>
  
  <p>This works in Firefox 4, loading the same viewer that IE uses. There is a delay displaying the lower part of the datepicker as if FF is thinking about it and then decides to do it.</p>
  
  <p>Works in Chrome (uses it's own PDF viewer)</p>
  
  <p>IE8 and IE9 do the same thing in hiding the lower part of the datepicker popup</p>
  
  <p>Also I have the same result whether the viewer is Adobe or PDF-Xchanger (really nice PDF viewer alternative)</p>
  
  <p>Any assistance would be greatly appreciated!</p>