Skip to main content

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 inputntype=radio] + label:before { content: "f10c"; }
/* checked icon */
.faCircle inputntype=radio]:checked + label:before { content: "f058"; color: green; }
/* allows space for check mark */
.faCircle inputntype=radio]:checked + label:before { letter-spacing: 10px; }

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

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

inputitype=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;
}

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

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

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

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

Thanks,

Kevin Kittinger

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

@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

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

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

Hey Sean,

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

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings