I am using the ASP.NET AJAX ModalPopupExtender on a page. The popup contains details of one or more customer orders that need to be printed out. Each order needs to be on a separate page.
I should be able to use the CSS page-break-after style, but this does not work in this scenario as the ModalPopupExtender causes the containing div to be set to position: absolute.
Can anyone suggest a workaround?
For completeness, an example HTML page that illustrates the issue is below.
<!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 should be on page 1 when printed
</div>
<div class="page">
This should be on page 2 when printed
</div>
<div class="page">
This should be on page 3 when printed
</div>
</div>
</body>
</html>