CODEWITHSUNDEEP
csslaravel-5dompdf
DIGVJSS
DIGVJSS

Reputation: 499

DOMPDF page-break-inside:avoid; property is leaving a blank at start of the pdf

In my code I am trying to add a external border frame to the pdf, but when I do so, the content of my pdf breaks in between and continue in second page. To overcome that Issue I used page-break-inside:avoid; property on parent div. But this resulted in a new strange issue, its keeping the first page blank (without border) and adding the whole content to second page (With border) of pdf.

No way for me to understand what I am doing wrong.

I am detailing dummy code snippet below -

<style type="text/css">
@page { margin: 0px; }
body { margin: 0px; }
html { margin: 0px;}
.back-img
{
    background: url('ImageURL');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    width:100%;
    height:100%;
}
</style>
<div style="page-break-inside:avoid;" class="back-img">
    <div style="text-align: center;">
        <h1>Heading Text</h1>
        <br>
        <img src="ImgURL" height="100">
        <br><br>
        Some Text Here
        <br>
        Some Text Here.. Some text here..
        <br>
        Some Text Here
        <br><br>
        Some Text Here
        <br><br>
        3-4 lines of paragraph here
        <br><br>
        <img src="ImgURL" height="50">
        <br>
        Some text Here
        <br>
        Some Text Here
        <br>
        Some Text Here
    </div>
</div>

Dompdf version is 0.7.0 PHP version is 7.0.18

Your help is much appreciated.

Upvotes: 2

Views: 6845

Answers (2)

Britic
Britic

Reputation: 533

I've had trouble with this over the years.

A solution that seems to work is make sure the first item is

page-break-inside: auto

on the first element, and then

page-break-inside: avoid

On any elements that follow

Upvotes: 2

BrianS
BrianS

Reputation: 13944

This is probably because you set the width and height of the container div to 100%. Dompdf doesn't do the best job flowing elements that are bumping up against the margins of the page. You have a few options to try to address the issuue:

  1. Set the height and width of the container to be a bit less than the containing page. This is easier if you know the page dimensions in PT and can specify specific lengths for the container dimensions.
  2. Style the container as a fixed-position element. It won't affect the document flow and will apply to all generated pages. Simply put the margins on the page and apply negative values to the border element.

For that latter try something like:

<style type="text/css">
@page { margin: 100px; }
.back-img
{
  position: fixed;
  background: url('ImageURL');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100%;
  top: -50px;
  right: -50px;
  bottom: -50px
  left: -50px;
}
</style>
<div class="back-img"></div>
<div style="text-align: center;">...</div>

Upvotes: 1

Related Questions