primefaces: Printer: CSS styles are no longer working
Describe the defect The Printer component in PrimeFaces 11 appears to no longer support CSS styles.
In previous versions of PrimeFaces including 6.2, 8, and 10 this was a supported feature.
I suspect this is due to the migration/upgrade to Print.js described here: https://github.com/primefaces/primefaces/issues/7288
Print.js does support passing CSS Styles as a configuration to the JQuery function as documented here, but it appears PrimeFaces is not making use of this capability. https://printjs.crabbly.com/
Reproducer There are 3 PF projects here with Payara Micro that can found here. https://github.com/tschia/primefaces-printer-demo
6.2 and 10 are provided to show that this behavior used to work. 11 is provided to show that the expected behavior no longer works.
Instructions to run the projects are included in the Project README file.
Environment:
- PF Version: 11.0
- JSF + version: Mojarra 2.3.14.payara-p3
- Affected browsers: Tested in Chrome and FireFox
To Reproduce Steps to reproduce the behavior:
- Follow the README instructions to run the application
- Open the application in a browser (see README for URL path)
- Click the Print All Records button
Expected behavior
- The “Don’t Show this Button” button should not appear in the print preview
- The “This text is blue but should print red” text should be red in the print preview
Example XHTML
<h:outputStylesheet name="styles.css" />
<p:commandButton value="Print All Records" type="button" >
<p:printer target="thingsToPrint" />
</p:commandButton>
<br/><br/>
<h:panelGroup id="thingsToPrint">
<span class="blue-text print-red-text">This text is blue but should print red </span>
<br/>
<p:commandButton value="Don't Show This Button on Print" styleClass="hide-on-print" />
</h:panelGroup>
Example CSS
.blue-text {
color: blue
}
@media print{
.hide-on-print {
display: none !important;
}
#thingsToPrint .print-red-text {
color: red;
}
}
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 20 (11 by maintainers)
Commits related to this issue
- Fix #8232: Printer allow custom configuration — committed to melloware/primefaces by melloware 2 years ago
- Fix #8232: Printer allow custom configuration — committed to melloware/primefaces by melloware 2 years ago
- Fix #8232: Printer allow custom configuration (#8236) — committed to primefaces/primefaces by melloware 2 years ago
Thanks for your help 😃 @melloware
Here is a fully working sample project: printer-override.zip
Just unzip it and run
mvn clean jetty:runand go to localhost:8080/primeface-test to see it in actionWhen in doubt reference PrimeFaces: https://github.com/primefaces/primefaces/blob/master/primefaces/src/main/resources/META-INF/faces-config.xml
That faces-config.xml has it correctly
Added a new property so you can pass any JSON options to
configurationon Printer so it future proofs it for PrintJS.