3

I have a page that I set the styles of it dynamically with all sort of settings

For example here is an element of a table that I am trying to print:

  <td *ngFor="let attribute of attributes"
      [class.table-vertical]="styles.template['displayVerticalLines']"
      [style.border-left-width]="styles.template['displayVerticalLines']?styles.template['verticalLineSize'] + 'px':null"
      [style.border-right-width]="styles.template['displayVerticalLines']?styles.template['verticalLineSize'] + 'px':null"
      [style.border-left-color]="styles.template['displayVerticalLines']?styles.template['verticalLineColor']:null"
      [style.border-right-color]="styles.template['displayVerticalLines']?styles.template['verticalLineColor']:null">

This is the function I print with:

   public print(): void {
            window.print();
    }

I see the styles affect the element all fine but when I try to print all the inline styles are ignored and only the ones that are in css files are visible.

I realize it is because the media type of the inline css is not print, but I don't see a way to set it as such.

I also tried to add a dynamic <style> element but the compiler just ignores it and skims over it.

Here is a simple plunker of the phenomenon:

https://plnkr.co/edit/vm1AgWP33LL2Gslylvkp?p=preview

How can I overcome this problem?

misha130
  • 5,457
  • 2
  • 29
  • 51
  • How are you trying to print them? Could you provide a Plunkr with the basic code to run? – Edmundo Santos Jul 27 '17 at 14:39
  • I added a simple plunker to show this happening and added the function that I use – misha130 Jul 27 '17 at 15:00
  • 1
    There are some properties like background-color that doesn't display by default while printing, as you can see here: https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview. I've added some border to your Plunker, clicked on the print button and everything worked fine. https://plnkr.co/edit/921kdL189uXwWEbF9hGi – Edmundo Santos Jul 27 '17 at 15:11
  • Problem is -webkit-print-color-adjust': 'exact' is chrome only. I added it anyway and it works. What I really wish is some way I could create dynamic css classes/css files – misha130 Jul 27 '17 at 15:24

0 Answers0