cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

How to have Custom CSS show up on Print to PDF

Jump to solution

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

0 Kudos
Reply
5 Replies
Workflow Hero

Re: How to have Custom CSS show up on Print to PDG

Jump to solution

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

Reply
Workflow Hero

Re: How to have Custom CSS show up on Print to PDG

Jump to solution

@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

0 Kudos
Reply
Workflow Hero

Re: How to have Custom CSS show up on Print to PDG

Jump to solution

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

0 Kudos
Reply
Workflow Hero

Re: How to have Custom CSS show up on Print to PDG

Jump to solution

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

0 Kudos
Reply
Workflow Hero

Re: How to have Custom CSS show up on Print to PDF

Jump to solution

Hey Sean,

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

0 Kudos
Reply