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