AnsweredAssumed Answered

How to have Custom CSS show up on Print to PDF

Question asked by kkittinger on Oct 23, 2017
Latest reply on Oct 30, 2017 by kkittinger

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

Outcomes