Search code examples
cssangularjsnode.jsphantomjsstylesheet

External & local CSS is not considered when rendering page to PDF using PhantomJS

Is there a way to force PhantomJS to read CSS styles?

I'm currently using Angular and UI-Grid to generate a table and when a value in the table meets a condition (e.g. if value > 1000) it will get assigned to a specific CSS class. Then I generate a PDF file using PhantomJS.

CSS

.data-records-alarm {
    color: red !important;
    text-align: center;
}

I have noticed that it recognizes "text-align: center;" property but it won't recognize the color "color: red !important;".

I have also tried "color: red;" or moving the CSS style and having it locally in my HTML file but it doesn't work.

Im currently using PhantomJS 2.0.0 and tested the Chrome & Firefox browsers.

Solution

  • the only way i got it to work is by using -webkit-text-fill-color instead of color

    .data-records-alarm {
    -webkit-text-fill-color: red !important;
    text-align: center;}