Header Footer Overlapping Issue

Lawrbit commented on Nov 18

Dear Team,

We are using a PDF export package to generate reports, which has been working well overall. However, we recently encountered an issue and your assistance would be greatly appreciated.

On one of our pages, we display a table and Google Chart graphs. When the data volume is moderate, both elements display correctly on the same page. However, when the table data increases, the graph shifts towards the footer, causing it to overlap with both the current page’s footer and the next page’s header.

The image attahched below for your reference:

Sebastian Morales commented on Nov 19

Pls put your chart inside a div with one of the following CSS classes:

    .page-break-before : auto/always/avoid/...
    .page-break-inside : auto/always/avoid/...
    .page-break-after : auto/always/avoid/...

For example:

 <div style="page-break-before:always;"><!-- chart --></div>

Let us know how it works for your case. Rgds,

Lawrbit commented on Nov 19

Thank you for the reply.

But it is not working, below is my code:

<div class="avoid-break page-break-inside">	
	<div style="width:100%; float:left; padding:0px; padding-right:1%; margin-top:10px; page-break-before:always;">
		<div style="border:1px solid #cccccc; padding:10px 5px; page-break-before:always;">
			<canvas id="RUChart" width="1110" height="500"></canvas>
		</div>
	</div>
</div>

Sebastian Morales commented on Nov 19

I see. How about adding body's margin css style for the PDF view:

<!-- MyReportPDF.view.php -->
<body style="margin:2cm;">
    ...
</body>

Lawrbit commented on Nov 19

It's not working. After applying this code, it is adding overall margin on all sides, and the same issue persists.

Please check the attached image:

Sebastian Morales commented on Nov 19

Would you mind posting your full PDF view for us to check the issue for you? Besides, pls go to our PDF export's header footer example at the following link and compare its PDF view at the end of the page with your case:

https://www.koolreport.com/examples/reports/export/header_footer/

Lawrbit commented on Nov 19

Hello,

Please find the attached image for your reference:

On the first and second pages, the headers are displayed correctly. However, on the subsequent page, the chart starts at the bottom of the page and overlaps with the next page's header.

Sebastian Morales commented on Nov 20

Sorry, what I meant was your PDF php view file content so that we could replicate your issue and find a solution. Tks,

Lawrbit commented on Nov 20

Hello,

We cannot publish the code publicly, but I can share it via email. Could you please provide your email address?

Sebastian Morales commented on Nov 20

Pls send your PDF view code to support@koolreport.com and mention this topic.

KoolReport's Forum

Header Footer Overlapping Issue #3380

Build Your Excellent Data Report