Printing contents of a featherlight lightbox which are loaded by ajax

Question

• Bootstrap 3.3.6
• jquery 1.12.3
• Featherlight 1.7.9

My web page contains a number of anchors like this:

<a href="/ajax/training/{url_title}" data-featherlight="ajax" class="btn btn-sm btn-bw">More info</a>

When a user clicks the "More info" anchor it opens a Featherlight lightbox and populates the contents via an ajax call.

The markup inside the lightbox is fairly simple. It contains a button to "Print this page" which is intended to print the contents inside the lightbox:

<div class="ajax-training">
    <h3>Foo</h3>
    <p>Bar</p>
</div>

<div class="text-center">
     <button onclick="printWindow()" class="btn btn-primary">Print this page</button>
</div>

There is some js inside the lightbox to handle printWindow():

<script>
function printWindow() {
    window.print();
}
</script>

And some CSS to avoid printing the "print this page" and Featherlight "close" buttons:

<style media="print">
.btn, .featherlight-close-icon {
    display: none;
}
</style>

This works ok in terms of populating the lightbox, triggering the Print function, and avoiding printing the buttons.

However... If the contents of the page are over 1 page long, it will only print the first page. This is occurring in different browsers and on different machines and operates in a consistent way.

I can't understand why this is occurring because I haven't added any CSS which would make that happen. Why is it cutting off after the first page?

This is how it appears in the print preview after clicking "Print this page". I have deliberately set the length of the content such that it would take 3 pages of A4 paper. It will only print page 1, and if I try and enter a number of pages beyond 1 (i.e. 2, 3, 2-3) it gives an error saying:

Out of bounds page reference, limit is 1

I've mentioned I'm using Bootstrap in case there are some conflicts or reasons this would cause this behaviour. There is no application-specific CSS in place that targets media print or equivalent. The only CSS that targets .ajax-training (where the content resides) is to style the heading and add some padding:

.ajax-training {
    padding: 10px; 
}
.ajax-training h3 {
    font-weight: bold;
    color: #022169; 
}

The screenshot shows the "two sided" box checked; I have tried it with both checked and unchecked and it makes no difference.

Answer 1

To load CSS for print you have to specific that either the entire file is specifically for print or that a section of the code is for print with a media query. Examples of both solutions below:

Entire file:

<link rel="stylesheet" type="text/css" media="print" href="print.css">

Media query:

@media print {
    background: red;
}

So for you it would proberly just be to create a duplicate link to the bootstrap and add the media="print" to it :)