As seen in the image below, the header is right at the top of the page (no margin between) and is being cut at the top and the bottom.
Similar situation happens with the footer
I was able to find on the DOM, the settings that create those problems
by changing those settings, I was able to fix those problems
But while I can fix that ON the DOM, I wasn´t able to sucessfuly change the XWiki.StyleSheet of the PDF Template.
For example, tried to change here, but didn´t have any effect at all. There is something very wrong, but I can´t pinpoint what.
@media print {
/* General Page Styling */
body {
margin: 1in; /* Example: Set overall page margins */
font-family: Arial, sans-serif; /* Choose a suitable font */
}
/* Paged.js Specific Styles */
.pagedjs_pagebox {
--pagedjs-pagebox-width: 210mm; /* Standard A4 page width */
--pagedjs-pagebox-height: 297mm; /* Standard A4 page height */
box-sizing: border-box; /* Include padding and borders within dimensions */
}
/* Header Styling */
.pdf-header {
padding: 15px; /* Add padding within the header */
text-align: center;
border-bottom: 1px solid black; /* Example: Add a bottom border */
}
/* Content Styling*/
.main-content {
padding: 20px; /* Adjust padding as needed */
}
/* Example: Image Handling */
img {
max-width: 100%; /* Make sure images scale within pages */
height: auto; /* Maintain aspect ratio */
}
}