Header and footer problem
675 views
Skip to first unread message
Agreesh V S
May 31, 2019, 9:11:55 AM5/31/19
to dompdf
I have created a html code to generate pdf, which includes details of clients as a patient. I want to write the details in three sections. One is GENERAL details, second is PERSONAL and next is the OTHER. After the design, i found a problem when generating the PDF. The contents under OTHER section overwrite over the footer section of first page and header over the second page.
<html> <head> <title>Prescription</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ padding: 0; margin: 0; font-family: "Times New Roman", Times, serif; } header{ position: fixed; top: 0; left: 0; right: 0; height: 200px; padding: 10px 50px; background-color: #ccc; border-bottom: 1px solid #1f1f1f; z-index: 1000; } .text-center{ text-align: center; } .phone{ float: right; margin-bottom: 10px; margin-right: 150px; } .phone h4{ text-align: center; right: 50px; } main{ margin-top: 200px; padding: 10px 50px; } .after-header{ height: 30px; padding: 10px 0; } .patient-id{ float: left; } .date-day{ float: right; } .page-header{ margin-top: 5px; padding: 5px; background-color: aqua; } .page-header h2{ font-family: monospace; font-size: 20px; text-align: center; } footer{ position: fixed; bottom: 0; left: 0; right: 0; height: 50px; border-bottom: 1px solid #1f1f1f; border-top: 1px solid #1f1f1f; z-index: 1000; } footer h3{ padding-left: 50px; } .details{ margin-top: 0; padding: 10px 0; } table{ margin: 5px 0; width: 100%; border-top: 1px dotted #1f1f1f; border-right: 1px dotted #1f1f1f; margin-bottom: 20px; } td{ text-align: justify; padding: 10px ; border-bottom: 1px dotted #1f1f1f; border-left: 1px dotted #1f1f1f; } table tr > td:first-child{ border-left: none; }
label{ font-weight: bold; font-size: 15px; } </style> </head> <body> <header> <div class="text-center"> <h1>SPECIALITY CLINIC</h1> <h2>xxxxxxxx</sub></h2> <h3>Pediatrition</h3> </div> <div class="phone"> <h4>Phone: xxxxx</h4> </div> </header> <footer> <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3> </footer> <main> <div class="after-header"> <div class="patient-id"><h3>Patient Id: 1001</h3></div> <div class="date-day"><h3>Date: 17/05/2019</h3></div> </div> <div class="page-header"> <h2>Patient Details</h2> <hr> </div> <div class="details"> <div> <div style="background-color: #f2f2f2; padding: 5px;"><h3>General Details</h3></div> </div> <table> <col width="10%"> <col width="20%"> <col width="10%"> <col width="10%"> <col width="30%"> <tr> <td><label>Name:</label></td> <td colspan="3"><label>Agreesh V S</label></td> <td rowspan="4"><img src="img.jpg"></td> </tr> <tr> <td><label>Age:</label></td> <td><label>24</label></td> <td><label>Gender: </label></td> <td><label>Male</label></td> </tr> <tr> <td><label>Phone: </label></td> <td colspan="3"><label>9876543210</label></td> </tr> <tr> <td><label>Email: </label></td> <td colspan="3"><label>9876543210</label></td> </tr> </table> <div> <div style="background-color: #f2f2f2; padding: 5px;"><h3>Personal Details</h3></div> </div> <table> <col width="50%"> <col width="50%">
<tr> <td><label>Date Of Birth:</label></td> <td colspan="3"><label>18/04/1995</label></td> </tr> <tr> <td><label>Weight</label></td> <td><label>65 KG</label></td> </tr> <tr> <td><label>Weight at Birth </label></td> <td colspan="3"><label>2.5 KG</label></td> </tr> <tr> <td><label>Blood Group </label></td> <td colspan="3"><label>B+ve</label></td> </tr> </table> <p style="page-break-before: always; margin:50px 0"></p> <div style="margin-top:300px;"> <div style="background-color: #f2f2f2; padding: 5px;"><h3>Other Details</h3></div> </div> <table> <col width="50%"> <col width="50%">
<tr> <td><label>Date Of Birth:</label></td> <td colspan="3"><label>18/04/1995</label></td> </tr> <tr> <td><label>Weight</label></td> <td><label>65 KG</label></td> </tr> <tr> <td><label>Weight at Birth </label></td> <td colspan="3"><label>2.5 KG</label></td> </tr> <tr> <td><label>Blood Group </label></td> <td colspan="3"><label>B+ve</label></td> </tr> </table> </div> </main> </body></html>This is the code i have written.
Below the pdf image also added.
BrianS
Jun 1, 2019, 8:06:22 PM6/1/19
to dom...@googlegroups.com
Keep in mind that when Dompdf positions content it is based on the bounds of the body. If you have a header/footer on the page you need to push it outside the bounds of the body or it will overlap the document content.
A small tweak to your CSS should fix things. First, add a page margin to accommodate your header. Something along the lines of:
@page {
margin: 220px 1in 1in 1in;
}Then modify the top positioning of your header to push it into that space:
header {
position: fixed;
top: -200px;
left: 0;
right: 0;
height: 200px;
padding: 10px 50px;
background-color: #ccc;
border-bottom: 1px solid #1f1f1f;
z-index: 1000;
}
Sara Sam
Jun 6, 2019, 8:47:50 AM6/6/19
to dom...@googlegroups.com
what was the problem that you have been facing over the minutes or hours.please give the details.
--
You received this message because you are subscribed to the Google Groups "dompdf" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dompdf+un...@googlegroups.com.
To post to this group, send email to dom...@googlegroups.com.
Visit this group at https://groups.google.com/group/dompdf.
To view this discussion on the web visit https://groups.google.com/d/msgid/dompdf/59c63c95-0da5-4fa1-8044-a571dfadc255%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages