You are viewing limited content. For full access, please sign in.

Question

Question

Checkboxes and Radio Buttons Forms PDF/TIFF Generation

asked on March 8, 2021 Show version history

Hello,

I recently received complaints from some of our users about the readability of checkboxes and radio buttons on saved copies of Forms, especially when they need to print physical copies.

We're currently running 10.4.5, and based on how older documents look I think the issue actually started when the PDF generation was changed.

From what I can tell, the problem is that in copies saved to a repository or emailed to someone, the radio and checkbox fields are rendered as disabled, which causes them to be much lighter and less visible.

As a workaround, I added JavaScript to remove the disabled attribute depending on the needs of the form (see attached before/after examples).

In general, the forms look much cleaner with the new rendering, but this particular change seems unintended. I'm not sure if this has already been addressed in Forms 11, but if not, hopefully it can be updated so the checkboxes/radio buttons are more visible like before.

UPDATE: Even with the disabled attribute removed to make the checkboxes look less transparent, the way they render is still far less readable/printable. I'm not sure how much that can be controlled, but the new rendering of these items does not work very well with black and white printing.

Screenshot.png
Screenshot.png (89.21 KB)
1 0

Replies

replied on March 8, 2021 Show version history

@████████ Okay I spoke too soon. I managed some CSS trickery and I think I came up with a workaround that doesn't technically require JavaScript.

Depending on your font sizes it might require some very careful adjustments, but this worked for me with default font size set on my form(s).

I had to do a few things to address a weird difference in how one of the icons was displayed in Chrome and Edge versus how it appeared on the saved copy, but it seems to be working.

Basically, instead of using JavaScript, this approach just uses the ::before pseudo-element to hide the actual input behind an icon.

UPDATE: I made a few more adjustments to the positioning after submitting test forms for a few different processes and seeing some imperfect alignment..

.cf-page-readonly input[disabled][type="radio"]::before {
  background: white;
  position: relative;
  content: "\25CB";
  font-size: 30px;
  top: -12.5px;
  left: -2.5px;
}

.cf-page-readonly input[disabled][type="radio"]:checked::before {
  content: "\25C9";
  font-size: 18px;
  top: -6.5px;
  left: -1px;
  z-index: 100;
}

/* prevent overlap/cutoff caused by size of empty circle icon */
.cf-page-readonly input[disabled][type="radio"]:not(:checked) {
  overflow: hidden;
}

/* the circled bullet symbol renders very differently in the browsers
I tested compared to the the saved form, but lf-responsive doesn't seem 
to apply to saved forms so I used this to fix that quirk*/
.lf-responsive .cf-page-readonly input[disabled][type="radio"]:checked:before {
  top: -3.5px !important;
}

.lf-responsive .cf-page-readonly .choice input[disabled] {
  margin-top: 3px !important;
}

.cf-page-readonly input[disabled][type="checkbox"]::before {
  background: white;
  position: relative;
  content: "\2610";
  font-size: 17px;
  top: -6.5px;
  left: -0.5px;
}

.cf-page-readonly input[disabled][type="checkbox"]:checked::before {
  content: "\2611";
}

2 0
replied on March 8, 2021

Hi Jason-

I ran into a request like this once. The focus was more on the actual form, but the generated document was affected, too. Basically, I used CSS to "highlight" the selected option by giving it a background color of yellow. Worked out quite well.

Here's a simple example I kept as a reference; it's for radio, but shouldn't be too hard to tweak it for checkbox.

.radio-checkbox-fieldset input[type="radio"]:checked+label {
  background-color: yellow;
}

 

2 0
replied on March 8, 2021

Hi Pieter,

Thank you for the suggestion. In our case, these are public forms that needs to match physical forms because about 60% are filled out by hand.

More often than not we also need to print the electronic forms for this process due to procedural reasons, so we want to keep them black and white friendly too.

I got a pure-CSS solution working with pseudo elements for now so that should do the job; just took a bit of trial and error to get the positioning right.

2 0
replied on March 8, 2021

The new pdf generator used since Forms 10.4.3 renders the submitted form as viewing it from Chrome directly, so the checkbox and radio button in the pdf look like the same as on the submitted form from Thank you page which is the default look of disabled checkbox and radio button controls provided by the browser.  

A possible solution is to create custom checkboxes and radio buttons to make them look clear on the submitted form.

1 0
replied on March 9, 2021 Show version history

Hi Xiuhong, thank you for the response. We fell quite a bit behind on updates last year so some of this stuff didn't come to our attention until recently.

I suppose I was just thinking that although the disabled look makes sense in a browser, it doesn't seem necessary or ideal on the copy saved to the repository.

I ended up using CSS to come up with a workaround, but for anyone with less than perfect eyesight I can see how the way they render now would be a concern.

2 0
replied on March 8, 2021

Would you mind sharing the CSS you use to make those disabled fields appear more readable?  Please and thank you.

0 0
replied on March 8, 2021

So you actually can't get it to work with CSS alone because the browser controls how checkboxes and radio buttons are rendered. I couldn't find any CSS that would override that so I went with JavaScript for everything.

I did add this CSS to keep behavior consistent if users are able to the view the form after submission or in read-only user tasks.

[backend-disabled] {
  cursor: not-allowed;
}

Then for the JavaScript I just added this, which only removed the disabled attribute when the page in read-only and seems to work for saved copies.

$(document).ready(function(){
  $('.cf-page-readonly [disabled]').removeAttr('disabled');
});

 

2 0
replied on March 8, 2021

Cool.  I will have to give that a try.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.