I have integrated the ASP.NET AJAX ModalPopupExtender into a webpage. The popup displays details of customer orders that need to be printed, with each order ideally on a separate page.
Unfortunately, the CSS page-break-after style doesn't seem to work in this case due to the ModalPopupExtender setting the containing div to position: absolute.
Any suggestions for a workaround?
For reference, here is an example HTML page showcasing the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Printing Pagination</title>
<style type="text/css">
div
{
padding: 10px;
margin: 10px;
}
div.outer
{
border: solid 5px green;
position: absolute;
top: 100px;
left: 100px;
width: 200px;
}
div.page
{
border: solid 5px red;
}
</style>
<style type="text/css" media="print">
div.outer
{
border: none;
}
div.page
{
page-break-after: always;
}
</style>
</head>
<body>
<div class="outer">
<div class="page">
This content should appear on page 1 when printed.
</div>
<div class="page">
This content should appear on page 2 when printed.
</div>
<div class="page">
This content should appear on page 3 when printed.
</div>
</div>
</body>
</html>