How to have Custom CSS show up on Print to PDF

  • 23 October 2017
  • 5 replies
  • 6 views

Badge +8

Hello Community,

We have created a form on a list that has custom CSS for labels, rich text, and choices.  When we print to PDF non of the custom CSS gets applied to the PDF, especially with CSS on Choices so that you cant see what was selected on the form.  Labels and Rich Text we can deal with the difference but Choice is a major concern if someone can't see what they had selected after printing the form out.  The CSS we are using for the Choices options is down below.  Any insight into this would be greatly appreciated.

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);

/** Choice Control **/
/* unchecked icon */
.faCircle input[type=radio] + label:before { content: "f10c"; }
/* checked icon */
.faCircle input[type=radio]:checked + label:before { content: "f058"; color: green; }
/* allows space for check mark */
.faCircle input[type=radio]:checked + label:before { letter-spacing: 10px; }

/** Check Boxes **/
/* unchecked icon */
.faToggle input[type=checkbox] + label:before { content: "f204"; }
/* checked icon */
.faToggle input[type=checkbox]:checked + label:before { content: "f205"; color: green; }

/** CSS for generic Choice Control **/
input[type=radio] {
  display: none;
}

input[type=radio] + label {
  display: block;
}

input[type='radio'] + label:before {
 display: inline-block;
 Font-Family: FontAwesome;
 Font-Size: 16px;
 Font-Style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 padding-left: 18px;
 padding-bottom: 10px;
 width: 25px;
}

input[type=radio] + label:before {
  content: "f10c"; /* Radio Unchecked */
}

input[type=radio]:checked + label:before {
  content: "f05d"; /* Radio Checked */
}

/** Custom Font Awesome checkboxes **/
input[type=checkbox] { 
  display:none; 
  font-size: 16px;
}

/* to hide the checkbox itself */
input[type=checkbox] + label:before {
 font-family: FontAwesome;
 display: inline-block;
 padding-right: 5px;
}

Thanks,

Kevin Kittinger


5 replies

Badge +9

Hi Kevin,

I haven't tested your code in this situation, but when I need to apply custom CSS to a form for Print to PDF, I'll wrap it in a @media print {}  media query listener. 

Thank you,

Sean

Badge +8

@Sean Fiene

I just want to make sure before I fully test.  I'll need to add the above css again inside the @ media print { } for it to hopefully work and be applied to PDF when a user does Print to PDF.

Thanks,

Kevin

Badge +9

Hi Kevin,

If possible, email me your form and I'll test it out in my environment. I'm just not sure what elements you've applied those classes against.

Thank you,

Sean Fiene

Badge +8

Hi Sean,

I'm checking to see if you got my email that you asked me to send you since i haven heard anything from you in a few days.

Thanks,

Kevin

Badge +8

Hey Sean,

Do i need to add the import for the font-awesome in the @media print {} as well?

Reply