Question

Read only Check boxes and Radio buttons greyed out are difficult to see

Forms How To

Updated July 27, 2022

asked on June 10, 2022

Does anyone else find it a little difficult to see the read only check boxes or radio buttons, to know what is selected? Is there a way to make the check and our radio buttons black instead of grey to make them stand out more?

0 0

Answer

SELECTED ANSWER

replied on June 10, 2022

Maybe someone else knows how to do this, I've personally never found a way to do it. I believe ths issue is that the browser is setting the appearance of the disabled checkbox and overriding the CSS, so even setting CSS options that the inspect element appears to be showing them in place, it still visually appears the same. So I've never been able to get it to work.

As an alternative, I usually will tweak the checkbox/radiobutton labels to make it more obvious which items are marked. Here's some CSS (based on the classic designer structure) that will make the labels of the unchecked items appear gray so the checked items stand out a little better:

input[type="checkbox"][disabled]:not(:checked)+label{ color: #D5D5D5; }
input[type="radio"][disabled]:not(:checked)+label{ color: #D5D5D5; }

You could take it further and modify the labels of the checked items, like this CSS (again - based on the classic designer structure) that makes them appear bold:

input[type="checkbox"][disabled]:checked+label{ font-weight: bold; }
input[type="radio"][disabled]:checked+label{ font-weight: bold; }

I know that's not exactly what you requested, but it may be sufficient to at least draw the user's eye towards the selected items in a better way than the default.

I would love to hear if someone else has been able to get some CSS to work to edit the appearance of the disabled checkboxes/radio buttons.

3 0

Replies

replied on June 10, 2022 • Show version history

I ran into the same issue, and eventually managed to do some CSS trickery to get a better look. What's worth noting is that this isn't exactly something Forms is doing, rather it is a result of how browsers display the inputs, and that started affecting saved copies when they switched to the browser-based PDF/TIFF generation for Save to Repository.

One of my posts in the following thread details the CSS, but basically what it does is use the CSS content attribute to insert symbols over the actual inputs.

That way when the form is in a read-only state, like the version saved to the repository, it shows the symbols instead of the greyed-out inputs.

It takes a bit of trial-and-error to get the positioning exactly right, but it did the trick and I've been using this approach ever since.

Checkboxes and Radio Buttons Forms PDF/TIFF Generation - Laserfiche Answers

This is the latest version I've used with a font size of 14px, but you might have to adjust some of the positioning for your particular forms.

/************* START FIX RADIO/CHECKBOX RENDERING *************/
.cf-page-readonly input[disabled][type="radio"]::before {
  background: white;
  position: relative;
  content: "\25CB";
  font-size: 30px;
  top: -13px;
  left: -2.5px;
}

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

/* prevent overlap/cutoff caused by size of empty circle icon */
.cf-page-readonly .cf-help-text {
  z-index: 101;
}

/* 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: -4px !important;
}

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

.cf-page-readonly input[disabled][type="checkbox"]:checked::before {
  content: "\2611";
}
/************* END FIX RADIO/CHECKBOX RENDERING *************/

3 0

replied on June 10, 2022

Oh! Now I remember this thread from last year. I totally forgot about that.

0 0

replied on July 27, 2022

I wish I'd looked this up sooner! Spent quite a bit of time building a similar solution from scratch...

0 0

replied on June 10, 2022

Thanks all! I have a LOT of form to do this with, so I think I will use the simple bold answer option, as a quick copy paste.

1 0

replied on June 10, 2022 • Show version history

Another alternative...

Note that I have not tested this all the way start-to-finish through archival to the repository on a form.

Since the issue is how the browser is handling disabled checkboxes and radio buttons, you could remove the disabled status (can be done via Javascript). At least in Forms 11 Update 2, the fields actually have both disabled and readonly attributes applied, so we can remove the disabled attribute, but leave the readonly one. With some application of some additional CSS we can get it to show in a way that still appears disabled to the user, but isn't forced into the browser's diabled greyed out appearance.

Javascript:

$(document).ready(function () {
  
  //This code finds all of the disabled checkboxes and radio buttons
  //when the form loads.  It removes the disabled status, but leaves 
  //the readonly status (so they still cannot be edited).  Because 
  //they are no longer disabled, they do not appear greyed out by 
  //the browser.  Instead, CSS is modified for the fields to reduce 
  //their opacity and prevent cursor access.
  $('input[type="checkbox"][disabled]').each(function() {
    $(this).attr('disabled', false);
    $(this).attr('backend-disabled', false);
    $(this).css('opacity', '0.5').css('cursor', 'not-allowed');
    $(this).closest('.cf-field').find('label').css('opacity', '0.5');
  });
  $('input[type="radio"][disabled]').each(function() {
    $(this).attr('disabled', false);
    $(this).attr('backend-disabled', false);
    $(this).css('opacity', '0.5').css('cursor', 'not-allowed');
    $(this).closest('.cf-field').find('label').css('opacity', '0.5');
  });
  
});

0 0

You are not allowed to follow up in this post.

Question

Question

Read only Check boxes and Radio buttons greyed out are difficult to see

Answer

Replies

Sign in to reply to this post.