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:

  1. Follow the README instructions to run the application
  2. Open the application in a browser (see README for URL path)
  3. Click the Print All Records button

Expected behavior

  1. The “Don’t Show this Button” button should not appear in the print preview
  2. 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

Most upvoted comments

Thanks for your help 😃 @melloware

Here is a fully working sample project: printer-override.zip

Just unzip it and run mvn clean jetty:run and go to localhost:8080/primeface-test to see it in action

When 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 configuration on Printer so it future proofs it for PrintJS.