Grid on WYSYWIG Forms Editor
I'd like this added to the body style of the iframe that is loaded in the Forms Editor (html.html_edit_form body.claro.body_edit_form). background-size: 12px 12px; background-image: linear-gradient(to right, #2000ff30 1px, transparent 1px), linear-gradient(to bottom, #2000ff30 1px, #fff 1px); background-repeat: unset; The result is the grid you see. I think this would be a nice UX enhancement that might turn on/off from some control in the editor toolbar.UX - CSS Pseudo Selectors - Indicate Required and More!
One thing that irks me is submitting a form that isn't complete and not having an indication of what is missing until after attempted submission. We could color all the labels differently than the non-required, but I really wanted an asterisk in red to use just a little bit of contrast that is more relaxing to the user's eyes. What can I say; I'm an Innovator... Here is the result of styling individual labels using sudo selector ::after ...and here is a sample for various components that I put in the "Form Body" CSS: /* dropdown select label selector */ .sys_fn_type .aras-field__label::after, /* calendar label selector */ .sys_fn_pr_found_date .sys_f_label::after, /* textarea label selector */ .sys_fn_pr_description .sys_f_label::after, /* checkbox label selector */ .sys_fn_rc_investigation_required .sys_f_label::after { content: " *"; color: red; } Hope that helps somebody. I think it looks great. The non-required fields are apparent now (I didn't screen shot the entire form) and the required fields are evident at a glance. Lastly, I should mention that using pseudo selectors ALWAYS requires a "content" attribute - even if it is an empty string - or it won't show. EDIT: Well, we need to tell the user what it means just incase they are from another planet, so I'll use ::after again, but on the whole div of my last element: .sys_fn_prob_res_act_disposition::after { content: "* indicates required fields"; color: red; display: inline-block; margin-top: 1.5em; text-align: right; /* I couldn't achieve the placement result I wanted with right padding or margin, so I had to use width percentage */ width: 96%; } Voila! BONUS: See the light grey line (#ddd) above "Project Discovered"? That's using the pseudo selector ::before!
