Report Pagination Issue

How do I?
1

My Interest Group Rosters are having issues when I render the report.
The Group Footer has an element to force a page break after. This is working fine, except I don’t want it at the end of the final group, because a blank page is rendered.
Here is the template code:

<style>
    @page {
        size: letter landscape;
        margin-top: 8;
        margin-left: 10;
        margin-bottom: 8;
        margin-right: 10;
    }
    .page {
        color: #000000;
        background-color: #ffffff;
    }
    
    .mailTable:nth-of-type(odd) td {
    background-color: #ffffff;
    }
    
    .mailTable:nth-of-type(even) td {
    background-color: #f0f0f0;
    }
    
</style>

<div>
    <div>{{#_GroupBy @root.[rqGroupRoster].[Records] 'GroupName' as | rqGroupRoster |}}
            <div class="fiveReportHelper">{{#_Each rqGroupRoster}}</div>
            <div class="fiveGroupByHeader">
                
                <!-- Blue header area -->
                <div>
                    <table style="width: 100%; background-color: rgb(207, 226, 243); border-collapse: collapse;">
                        <tbody>
                            <tr style="width: 100%">
                                <td rowspan="4" style="width: 18%; vertical-align: top;">
                                    <div style="margin: 5px 0 5px 5px; max-width: 70px; max-height: 70px; overflow: hidden;">
                                        <div style="width: 100%; height: 100%;">
                                            {{five.variable.logo}}
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 64%; text-align: center; font-size: 16px;">
                                    <strong>{{GroupName}} Roster</strong>
                                </td>
                                <td style="width: 17.5%; text-align: right;">
                                    <span style="font-size: 12px;">{{five.variable.CurrentDate}}</span>
                                </td>
                                <td style="width: .5%" ;=""><br></td>
                            </tr>
                            <tr>
                                <td style="width: 64%; text-align: center; font-size: 12px;">
                                    <span style="color: rgb(102, 102, 102);">Category: </span>
                                    <span>{{Category}}</span>
                                </td>
                                <td style="width: 17.5%; text-align: right; font-size: 12px;">
                                    <span style="color: rgb(102, 102, 102);">Portfolio: </span>
                                    <span>{{Portfolio}}</span>
                                </td>
                                <td style="width: .5%;"><br></td>
                            </tr>
                            <tr style="height: 3mm;">
                                <td style="width: 64%; text-align: center; font-size: 12px;">
                                    <span style="color: rgb(102, 102, 102);">Meets: </span>
                                    <span>{{DayOfWeek}}</span><span style="color: rgb(102, 102, 102);"> of {{WeeksLabel Weeks}} </span>
                                    <span>{{Weeks}}</span>
                                </td>
                                <td style="width: 17.5%; text-align: right; font-size: 12px;">
                                    <span>{{Members}}</span><span style="color: rgb(102, 102, 102);"> members of </span>
                                    <span>{{MaxMembers}}</span><span style="color: rgb(102, 102, 102);"> Max</span>
                                </td>
                                <td style="width: .5%;"><br></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- VP, Registrar Area -->
                <div style="background-color: #FFFFFF;">
                    <table style="width: 100%;">
                        <tbody>
                            <tr style="font-size: 11px;">
                                <td style="width: 11%; color: rgb(183, 183, 183);">Vice President</td>
                                <td style="width: 22%;">{{Vp}}</td>
                                <td style="width: 13%;">{{FormatPhone VpPhone}}</td>
                                <td style="width: 20%;">{{VpEmail}}</td>
                                <td style="width: 34%;">&nbsp;</td>
                            </tr>
                            <tr style="font-size: 11px;">
                                <td style="width: 11%; color: rgb(183, 183, 183);">Registrar</td>
                                <td style="width: 22%;">{{Registrar}}</td>
                                <td style="width: 13%;">{{FormatPhone RegistrarPhone}}</td>
                                <td style="width: 20%;">{{RegistrarEmail}}</td>
                                <td style="width: 34%;">{{RegistrarAddress}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Member Heading -->
                <div style="height: 8px; background-color: #FFFFFF;">&nbsp;</div>
                <div style="background-color: #FFFFFF;">
                    <table style="width: 100%;">
                        <tbody>
                            <tr style="font-size: 11px; color: rgb(183, 183, 183); text-decoration: underline;">
                                <td style="width: 32%; text-decoration: underline;">Name / Address</td>
                                <td style="width: 10%; text-align: center; text-decoration: underline;">Position(s)</td>
                                <td style="width: 30%; text-decoration: underline;">Email / Primary Phone / Secondary Phone</td>
                                <td style="width: 10%; text-decoration: underline;">Member to</td>
                                <td style="width: 10%; text-decoration: underline;">SG Paid</td>
                                <td style="width: 8%; text-decoration: underline;">Check No.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>

            <!-- Member Data -->
            <div>
                <div class="fiveReportHelper">{{#_Each GroupedRecords}}</div>
                <table class="mailTable" style="width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;">
                    <tbody>
                        <tr style="font-size: 11px;">
                            <td style="width: 32%;"><strong>{{MemberName}}</strong></td>
                            <td style="width: 10%; text-align: center; font-size: 10px;">{{Position}}</td>
                            <td style="width: 30%;" colspan="2">{{MemberEmail}}</td>
                            <td style="width: 10%;">
                                <span style="color: {{ValidToColor ValidTo}};">
                                    {{USDate ValidTo}}
                                </span>
                                <!--<div style="color: {{#if (IsDuesPastDue ValidTo)}}blue{{else}}black{{/if}};">
                                    {{USDate ValidTo}}
                                </div>-->
                            </td>
                            <td style="width: 10%;">
                                <span style="color: {{GroupFeesColor Paid}};">
                                    {{USDate Paid}}
                                </span>
                                <!--<div style="color: {{#if (IsSGFeePastDue Paid)}}blue{{else}}black{{/if}};">
                                    {{USDate Paid}}
                                </div>-->
                            </td>
                            <td style="width: 8%;">{{CkNo}}</td>
                        </tr>
                        <tr style="font-size: 11px;">
                            <td style="width: 32%;">{{MemberAddress}}</td>
                            <td style="width: 10%;"><br></td>
                            <td style="width: 15%;">{{FormatPhone PrimaryPhone}}
                                <span style="color: rgb(17, 85, 204);"> {{PrimaryPhoneType}}</span>
                            </td>
                            <td style="width: 15%;">{{FormatPhone SecondaryPhone}}
                                <span style="color: rgb(17, 85, 204);"> {{SecondaryPhoneType}}</span>
                            </td>
                            <td style="width: 10%;"><br></td>
                            <td style="width: 10%;"><br></td>
                            <td style="width: 8%;"><br></td>
                        </tr>
                    </tbody>
                </table>



                <div class="fiveReportHelper">{{/_Each}}</div>

                <div class="fiveGroupByFooter">

                    <div style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;" contenteditable="false" class="fiveReportBreakAfter">&lt;--- Page Break ---&gt;</div>

                </div>
                <div class="fiveReportHelper">{{/_Each}}</div>
                <div class="fiveGroupByFinal">
                    <!--<div style="font-size: 10px;">Group By Final rqGroupRoster</div>-->
                </div>

        {{/_GroupBy}}</div>

    <!-- Page Footer -->
    <div class="fiveReportFooter-everyPage">
        <table style="width: 100%; font-size: 10px;">
            <tbody>
                <tr>
                    <td style="text-align: left;">
                        <span style="color: red;">Red dates</span>
                        indicate expired membership or overdue group fees.
                    </td>
                    <td style="text-align: right;">
                        Page &lt;five.pageNumber.current.arabic&gt;
                        of &lt;five.pageNumber.total.arabic&gt;
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>
</div>

Can you suggest a modification that will cause this to not happen?
I tried inserting
{{#unless @last}} and {{/unless}} abound the div inside the five group by footer, but that didn’t help.

Thanks so much!!!

2

I was able to solve this by moving this line

<div style="border: 1px dashed black; display: flex; justify-content: center; width: 100%;" contenteditable="false" class="fiveReportBreakAfter">&lt;--- Page Break ---&gt;</div>

out of the fiveGroupByFooter section and up between the {{#_Each…}} div and the fiveGroupByHeader div

If it is put inside the fiveGroupByHeader div, it causes multi-page rosters to have an extra blank page between the actual pages.

It would be easier to figure these things out if the documentation was more complete, but I appreciate your help on the forum.

You can close this issue unless you have something else to add.

3

Thanks Ron, I am happy you have it sorted.

Kind regards,

Jo