Custom css on generating PDF

[Yat Tim]

Hello

I have assigned some custom CSS classes and point to a css file with oxf.fr.css.custom.uri . On browser print, styles for custom css are reflecting on screen. However PDF file does not reflect those styles. I do also see @media print styles for custom class are on the css file of the web page.

Could you please suggest what should be done to apply those style on the PDF file?

Regards

Tim

[Alessandro Vernet]

Hi Tim,

This could be either because:

* Your CSS doesn't reach the PDF renderer.
* Your CSS isn't understood or applied by the PDF renderer.

As a first step, in the browser, open your form in view mode (by clicking the View button, or when editing data, replacing `edit` with `view` in the URL, as shown below), and then use your browser's dev tools to switch to the print media. When you do so, is your CSS applied by the browser?

https://demo.orbeon.com/demo/fr/orbeon/bookshelf/view/891ce63e59c17348f6fda273afe28c2b

-Alex

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to orbeon+un...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/orbeon/1ca646d2-74b1-43f6-80c4-955e0cb03c79n%40googlegroups.com.

[Yat Tim]

Hi Alex

yes, On browser print media, CSS is applied by the browser.

Tim

[Alessandro Vernet]

Ok Tim, thank you for checking. The issue might be due to the fact that the PDF renderer we use (Open HTML to PDF) has less complete CSS support than modern browsers. Could you create a minimal example I can run locally that reproduces the problem?

-Alex

[Yat Tim]

For example, I am trying to display rate label and options in the same horizontally and change background color of some fields. See attached image between web and pdf. 

@media print { 

.background-color-yellow {
background-color: yellow;
}

.label-horizontal.xforms-control {

display: flex !important ;
background-color: aliceblue;
}
.label-horizontal .xforms-label {
width: 150px;
flex-shrink: 0 !important ;
}
.label-horizontal .xforms-field {
flex-grow: 1 !important ;
}

}

Thanks

Tim

[Alessandro Vernet]

Hi Tim,

The Open HTML to PDF library used by Orbeon Forms does not support the flexbox layout (see link below), which most likely explains why your CSS isn't working. You'll need to write CSS that doesn't rely on display: flex.

https://github.com/danfickle/openhtmltopdf/issues/69

-Alex

--

You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to orbeon+un...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/orbeon/00fa4264-d87f-4361-b4b0-5fcb5e203818n%40googlegroups.com.

[Yat Tim]

Noted. Thank you for checking.

Tim