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
