Header/Footer Overlapping Body Content in Exported PDFs

Operating system

Windows

Joplin version

3.1.24

Editor

Markdown Editor

What issue do you have?

Hello,

I am encountering an issue with the PDF export functionality in Joplin. Specifically, when I use the following custom CSS for adding a header and footer, the body content overlaps with both the header and the footer. This occurs particularly on pages after the first one in multi-page PDFs.

Here is the custom CSS I am using:

@media print {
	@page {
		/* Top/bottom vs. left/right margins. */
		margin: 40pt 40pt;
	}
	.exported-note::before {
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		width: calc(100% - 20pt);
		height: 10pt;
		font-family: 'Roboto Mono';
		font-size: 10px;
		color: darkgrey;
		justify-content: flex-end;
		content: 'I am header';
	}
	.exported-note::after {
        position: fixed;
        bottom: 0;
        display: block;
        width: 100%;
        font-family: 'Segoe Print', sans-serif;
        font-size: 6pt;
        color: #333;
        text-align: left;
        border-top: 1pt dashed darkgrey;
        padding-top: 5pt;
        white-space: pre-wrap;
        line-height: 1.1;
        content: "I am footer";
	}
}

The header and footer render correctly, but the main content of the document sometimes overlaps with these fixed elements. I have attached a sample PDF illustrating the problem.

Screenshots

5. Joplin Privacy Policy.pdf (225 KB)
userstyle.css (751 Bytes)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.