[SOLVED] Using Rotativa to generate PDF From a view when the page breaks data continue on the header of the second page disregarding CSS

Using Rotativa to generate PDF From a view when the page breaks data continue on the header of the second page disregarding CSS

I have tried many answers and have came up with the conclusion that there were no answer even from the developers themselves, I have an index page that gets created by a complex module, the view receives the module with ActionAsPdf and produce the PDF except when page breaks the table continue on the next page overwriting records on top of the table headers.

public ActionResult PrintRoster(Guid id)
    {
        string footer = "--footer-right \"Date: [date] [time]\" " + "--footer-center \"Page: [page] of [toPage]\" --footer-line --footer-font-size \"9\" --footer-spacing 5 --footer-font-name \"calibri light\"";

        return new ActionAsPdf("RosterPDF", 
                            new { id = id }) { FileName = "ClassRoster.pdf",
                                                PageSize = Rotativa.Options.Size.A4,
                                                PageOrientation = Rotativa.Options.Orientation.Portrait,
                                                MinimumFontSize = 16,
                                                PageMargins = {Top = 15, Bottom = 22},
                                                PageHeight = 40,
                                                CustomSwitches = footer
                            };
    }

the RosterPDF gets created then it produce the PDF in question

@model Training.ViewModels.RosterViewModel
@using Training.UtilModels
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/trstyle.css" rel="stylesheet" />
<link href="~/Content/themes/base/css" rel="stylesheet" />
<link href="~/Content/Print.css" rel="stylesheet" media="print" />
<title></title>
</head>
<body>  
<h1 class="text-center">Class Attendance</h1>
<hr>
<div class="row">
    <div class="col-sm-4 text-justify"> <strong> Class Name: </strong> @Model.MClass.ClassName </div>
    <div class="col-sm-4 text-justify"> <strong>Instructor: </strong> @Model.MClass.Instructors.FirstOrDefault().FullName</div>
</div>
<div class="row">
    <div class="text-justify col-sm-4"> <strong> Section Number: </strong> @Model.MClass.SectionNumber </div>
    <div class="col-sm-4 text-justify"> <strong>Term: </strong> @Model.MClass.Term.TermName</div>
</div>
<div class="row">
    <div class="text-justify col-sm-4"> <strong> Location: </strong> @Model.MClass.TLocation.LocationName </div>
    <div class="col-sm-4 text-justify"> <strong>Year: </strong> @Model.MClass.ClassStartDate.Year</div>
</div>
<hr>

<table id="Events" class="table table-bordered table-striped page-breaker">

    <thead>
        <tr>
            <th>Name</th>
            <th>Payroll<br /> Number</th>
            @for (int i = 1; i <= Model.MClass.Course.NoDays; i++)
            {
                <th>@BusinessDay.AddWorkDays(Model.MClass.ClassStartDate, i).AddDays(-1).ToShortDateString()</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var x in Model.ClassAttendances)
        {
            <tr>
                <td><strong>@x.StudentName</strong></td>
                <td>@x.PayrollNo</td>
                @for (int i = 0; i < Model.MClass.Course.NoDays; i++)
                {
                    <td>@(x.AttendanceCodeId.ElementAt(i) != 0 ? x.AttendnaceCodes.Where(t => t.Value == x.AttendanceCodeId.ElementAt(i).ToString()).Select(t => t.Text).FirstOrDefault() : "")</td>
                }
            </tr>
        }
    </tbody>
    <tfoot style="page-break-after: always;">
        <tr>
            <td colspan="10" class="page-breaker">
                <strong>STUDENTS: Please make any corrections to your name or number directly on this form.</strong>
            </td>
        </tr>
    </tfoot>
</table>

the out put looks as follow

The output

Solution

I fixed a similar issue by adding this in css:

tr {
    page-break-inside: avoid;
}

Hope it works for you.