When you display a toggle, it's very difficult to see that it's NOT been selected (ie. that it's not just a text field, but that it's a toggle, and it's currently marked as FALSE) unless you hover over it to see toggle unselected.
Can you put a "X" or "No" or some other visual clue to the user? You've got the visual tick, so it makes more sense to have a visual for the negative also?
Please sign in to leave a comment.
Hello Andy,
Please try the following CSS and let me know if that helps.
.bool-false .bool {display: inline-block; background-position: 0 0px; background: url(../../images/icons/bool-toggle.png?version=20190627.17) no-repeat !important;}
Result:
Please let me know if this is helpful.
Thank you,
Roland
Unreal Roland! That did the trick! Sweet.
Another question - if I create a custom icon "X" in the same style as the tick - can a CSS guru convert that into that URL component in the CSS?
eg. .bool-false .bool {display: inline-block; background-position: 0 0px; background: url(MYCUSTOMX.png) no-repeat !important;}
Hello Andy,
You can use a custom icon, but you can use an OOTB icon as well:
.bool-false .bool {display: inline-block; background-position: 0 0px; background: url(https://app2.clarizen.com/Clarizen/Image35.21.0.1.1.aspx?version=minor_19_0_20190627.17) no-repeat !important;}
.bool-false .bool:hover {display: inline-block; background-position: 0 0px; background: url(../../images/icons/bool-toggle.png?version=20190627.17) no-repeat !important;}
The above will show red X when not hovering over and disabled toggle when hovering over the field. If you don't want the hover effect, do not use the second bit.
Please let me know if this helps.
Thank you,
Roland
Hey Roland - I just implemented this today, and it's AWESOME.
It's pretty much exactly what I was looking for. Thanks again for your help.
One minor question, becuase the PM team lead asked - do you have a black "X" instead of a red as an OOB URL I can use? They wanted it to stand out slightly less.
