Quote template extra blank page

[tirabc]

Hi all,

It’s my first post, I hope to put it in the right place.

I coded a new template for quotes, in A4 landscape, everything is good in html render even when printing in pdf from browser.

My issue is when using the download button widget that export the template in PDF, an extra blank page is added.
I tried many CSS hacks to avoid it but it’s still there.
Maybe you have some tips to avoid this extra page ?

My pseudo code:
<html>

<body>

<div class=“page-section”>

… all my template here …

<section class=“no-print”>Print widget</section>

</div>

</body>

</html>

CSS fix attemps:

/* 1. Ensure the last element doesn’t cause extra space */
.page-section > :last-child {
margin-bottom: 0;
}

/* 2. remove print widget on print */

@media print {
/* Remove elements not needed in print */
.no-print {
display: none;
}
/* Ensure widow/orphan control */
p {
orphans: 3;
widows: 3;
}
}

/* 3. force no page break */

.page-section {
page-break-inside: avoid;
page-break-after: avoid;
}

/* Avoid page breaks inside paragraphs */
p {
page-break-inside: avoid;
}

/* Force page breaks before new sections */
.section-title {
page-break-before: always;
}

/* Prevent orphaned headings */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}

/* 4. fixed margin for main containers body html*/

@media print {
body, html {
height: 210mm;

margin: 0;
padding: 0;
page-break-after: avoid;

}

}
Thanks

[MichaelMa]

Hard to tell without visual samples of what the quote looks like.

However, do you have any content that is really wide? Either a div with a set width, a wide image or long text that doesn’t break? The extra page could be an extra horizontal page rather than page 2. This could mean it works fine in landscape, with the extra width, but not in portrait where the width is too short.

Maybe try setting a width/max-width on the the html/body also? Perhaps add in overflow: hidden.

[tirabc]

Here are some screens to give some context: the main page and extra page are in landscape mode.

It seems there is no wide text.

I’ll try setting width on html body