PageTop not replicated in all the pages
dichioniccolo opened this issue · comments
The PageTop componend does not get replicated in all the pages when rendering a pdf.
<PageTop className="flex h-auto items-center justify-between">
...omitted
</PageTop>
What would the solution be?
Hey @dichioniccolo! Thanks for reaching out. Could you send the example code for this document? Most importantly, if there are different margin settings on the first and subsequent pages as the page top component lives in the margin regions.
Thanks!
Hi @Titou325
Here it is!
<>
<CSS>
{String.raw`
@page {
size: a4;
margin: 0.25in;
}
body {
line-height: 1.1;
}
`}
</CSS>
<Tailwind>
<div>
{/* h-auto needed because PageTop has automatically a 100% height and pushes the content of the first page to the second page */}
<PageTop className="flex h-auto items-center justify-between">
<div className="flex flex-1 gap-2">
<div className="flex flex-1 flex-col items-center justify-center">
<p className="text-base font-bold">
{t.vin()}: {vin.code}
</p>
<p className="text-sm">
{t.productionOrder()}: {vin.order.code}
</p>
<p className="text-xs">
{t.print.date()}: {format(new Date(), "dd-MM-yyyy HH:mm:ss")}
</p>
</div>
</div>
<svg
className="h-16 w-60"
dangerouslySetInnerHTML={{
__html: svg,
}}
/>
</PageTop>
<h2 className="mt-4 text-center text-sm font-bold">
{t.print.summaryOfActivitiesWithErrors()}
</h2>
<table className="mt-2 w-full">
<thead>
<tr className="border border-gray-300 bg-black text-xxs font-bold text-white">
<th className="py-2 pl-4 text-left text-xs font-bold">
{t.line.segment()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.line.workstation()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.activity()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.activities.table.type()}
</th>
<th className="py-2 text-left text-xs font-bold">
{t.workOutcome()}
</th>
</tr>
</thead>
<tbody>
{segments.map((segment) => (
<React.Fragment key={segment.id}>
{segment.workstations.map((workstation, workstationIndex) => (
<React.Fragment key={workstation.id}>
{workstation.activityEvaluations.map(
(activityEvaluation, activityIndex) => (
<tr
className="border-b border-gray-300"
key={activityEvaluation.id}
>
<td className="py-2 pl-4 text-left text-xs">
{workstationIndex === 0 &&
activityIndex === 0 &&
segment.name}
</td>
<td className="py-2 text-left text-xs">
{activityIndex === 0 && workstation.name}
</td>
<td className="py-2 text-left text-xs">
{activityEvaluation.name}
</td>
<td className="py-2 text-left text-xs">
{(activityEvaluation.type ===
ActivityType.SCREWING ||
activityEvaluation.type ===
ActivityType.SPECIAL_EQUIPMENT) && (
<>
{translateProgramName(
t,
activityEvaluation.programEvaluation?.name,
)}
</>
)}
{activityEvaluation.type ==
ActivityType.MARRIAGE && (
<>
{translateActivityType(
t,
valueToKey(
ActivityType,
activityEvaluation.type as ActivityType,
),
)}
</>
)}
</td>
<td className="py-2 text-left text-xs">
{translateActivityResult(
t,
valueToKey(
Status,
activityEvaluation.status as Status,
),
)}
{activityEvaluation.programEvaluation && (
<>
{" - "}
{activityEvaluation._count.results}/
{activityEvaluation.programEvaluation
.quantity +
activityEvaluation.programEvaluation
.reworkQuantity}
</>
)}
</td>
</tr>
),
)}
</React.Fragment>
))}
</React.Fragment>
))}
</tbody>
</table>
</div>
</Tailwind>
</>
Thanks a lot!
Hey @dichioniccolo, thanks for your patience! We were unable to reproduce this issue. Based on the provided screenshot and your code, it seems that the React-Print CSS may not get loaded correctly. Could you provide more information on how you use the compile function? This could also happen if your margin is too small, as the PageTop component lives in the margin. (e.g. the 0.25in are too small to display the header), but that should also happen on the first page.
Here is the test code we used on our (https://onedoclabs.com/) playground:
import { Footnote, PageBottom, Tailwind, CSS, PageTop, PageBreak } from "@onedoc/react-print";
import { QRCodeSVG } from "qrcode.react";
import { ArrowRightIcon } from "@heroicons/react/20/solid";
import React from "react";
export const App = () => {
return (
<Tailwind>
<CSS>
{String.raw`
@page {
size: a4;
margin: 0.25in;
}
body {
line-height: 1.1;
}
`}
</CSS>
<div>
{/* h-auto needed because PageTop has automatically a 100% height and pushes the content of the first page to the second page */}
<PageTop className="flex h-auto items-center justify-between">
<div className="flex flex-1 gap-2">
<div className="flex flex-1 flex-col items-center justify-center">
<p className="text-base font-bold">
Test
</p>
<p className="text-sm">
Test
</p>
<p className="text-xs">
Date
</p>
</div>
</div>
</PageTop>
<table>
<thead>
<tr>
<td><b>Test</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr><tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr></tbody>
</table>
Test
<PageBreak />
Test 2
<PageBreak />
Test 3
</div>
</Tailwind>
);
};
export default App;