I am using a table with a tbody etc. I have a situation where I have created a report widget that loops through dates then reservations followed by service items. Everything looks fine on the screen, however when printing, there is always a blank page at the beginning. If I remove the second and third loop (ng-repeat), it prints fine but when I introduce the second ng-repeat I get the issue.
I have also tried creating the markup in the client script first then just displaying the content in the relevant place in the table (you can see the commented out markup below) but I have the exact same issue, so I have ruled out the ng-repeat.
This is the shape of the object (only one date, reservation and service item but will be many):
{
"meta": {
"run_date": "10/06/2024 13:54:49",
"from": "14/06/2024",
"to": "17/06/2024"
},
"business_team": "Team 1 | Team 2",
"dates": [
{
"value": "Saturday, 15 June, 2024",
"reservations": [
{
"sys_id": "a744889f1ba602100797ed79b04bcb03",
"location": "Room123",
"subject": "A new day, a new population of text in the subject field",
"requested_for": "Smith, John",
"attendees": 10,
"additional_info": "This is the additional information",
"service_items": [
{
"start": "15/06/2024 15:00:00",
"end": "15/06/2024 16:00:00",
"quantity": "14",
"category": "Equipment",
"name": "Mouse",
"comment": "This is the comment field"
}
]
}
]
}
]
}
HTML Template
<div class="container-fluid">
<table>
<thead>
<tr>
<td>
<header class="page-header">
<div class="logo">
<img src="logo.png" width="50" height="50"/>
</div>
<div class="header-text">
<span>Room Booking Details with Add-ons</span><br />{{ reportContent.business_team }}
</div>
<div class="address">
xxx<br />xxx<br />xxx
</div>
<div class="column-header">
<span>Start</span>
<span>End</span>
<span>Items</span>
<span>Item comments</span>
</div>
</header>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--<span ng-bind-html="content"></span>-->
<div ng-repeat="date in reportContent.dates track by $index">
<header class="date-banner">
{{date.value}}
</header>
<section class="reservation" ng-repeat="reservation in date.reservations track by $index">
<div class="room-subject">
<span>{{ reservation.location }}</span>: {{ reservation.subject }}
</div>
<div class="name-attendees">
<span>{{ reservation.requested_for }}</span>
<span class="text-right">{{ reservation.attendees }} Attendees</span>
</div>
<div class="additional-info">
<p ng-bind-html="reservation.additional_info"></p>
</div>
<div class="service-items" ng-repeat="item in reservation.service_items">
<span>{{ item.start }}</span>
<span>{{ item.end }}</span>
<span>{{ item.quantity }} x {{ item.category }} - {{ item.name }}</span>
<span ng-class="{empty:!item.comment}">{{ item.comment }}</span>
</div>
</section>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<footer class="page-footer-space"></footer>
</td>
</tr>
</tfoot>
</table>
<footer class="page-footer">
<spa>Generated: {{ reportContent.meta.run_date }}</spa>
<span>From {{ reportContent.meta.from }} to {{ reportContent.meta.to }}</span>
<span>Room Booking Details with Add-ons for {{ reportContent.business_team }}</span>
</footer>
</div>
In case you're wondering, I am using a solution to give a fixed header and footer on every page, however I still get this issue when I remove that completely. Thanks in advance for your help.
You are using a table as the top structure, the thing with HTML table, is that it should have a particular structure like table > tbody > tr -> td, if not the table does not render, instead, go for replacing all the table elements with DIVs and fix the layout issues with CSS.
<div class="container-fluid">
<div>
<div>
<div>
<div>
<header class="page-header">
<div class="logo">
<img src="logo.png" width="50" height="50"/>
</div>
<div class="header-text">
<span>Room Booking Details with Add-ons</span><br />{{ reportContent.business_team }}
</div>
<div class="address">
xxx<br />xxx<br />xxx
</div>
<div class="column-header">
<span>Start</span>
<span>End</span>
<span>Items</span>
<span>Item comments</span>
</div>
</header>
</div>
</div>
</div>
<div>
<div>
<div>
<!--<span ng-bind-html="content"></span>-->
<div ng-repeat="date in reportContent.dates track by $index">
<header class="date-banner">
{{date.value}}
</header>
<section class="reservation" ng-repeat="reservation in date.reservations track by $index">
<div class="room-subject">
<span>{{ reservation.location }}</span>: {{ reservation.subject }}
</div>
<div class="name-attendees">
<span>{{ reservation.requested_for }}</span>
<span class="text-right">{{ reservation.attendees }} Attendees</span>
</div>
<div class="additional-info">
<p ng-bind-html="reservation.additional_info"></p>
</div>
<div class="service-items" ng-repeat="item in reservation.service_items">
<span>{{ item.start }}</span>
<span>{{ item.end }}</span>
<span>{{ item.quantity }} x {{ item.category }} - {{ item.name }}</span>
<span ng-class="{empty:!item.comment}">{{ item.comment }}</span>
</div>
</section>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<!--place holder for the fixed-position footer-->
<footer class="page-footer-space"></footer>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<spa>Generated: {{ reportContent.meta.run_date }}</spa>
<span>From {{ reportContent.meta.from }} to {{ reportContent.meta.to }}</span>
<span>Room Booking Details with Add-ons for {{ reportContent.business_team }}</span>
</footer>
</div>