Currently, I am in the process of working on a new iteration of the project and encountering issues with the print CSS style implementation.
Here is the link to the old project for reference:
To print, follow these steps:
Click on the wrench button -> printer button -> choose the template. A modal will appear allowing you to print in both portrait and landscape orientations. The printing process involves an iframe and a combination of two CSS stylesheets; one from the main project and another unique to the iframe.
The CSS for printing hides all content except for the modal when printed. Attempting to print directly from the main page results in a blank page.
In this new version, I have omitted the use of iframes due to limitations with maps. While the new method eliminates iframes, Bootstrap now conflicts with the printing functionality.
Initially facing issues with orientation in Chrome and missing pages on other browsers, I discovered that overriding Bootstrap's CSS rules could resolve these problems:
@page {
size: auto
}
.flex-class {
display: block;
}
Despite achieving success with Firefox and Opera, Internet Explorer 11 still presents challenges in printing multiple pages. The following CSS adjustments seem to be disregarded by IE:
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
UPDATE:
I have tried applying display: table to the main div containing the two pages which allows successful printing in IE but not in Firefox.