Update Style Sheets to Accommodate Forms

JeremyCaney commented 4 years ago

There are a handful of style sheet issues exposed by the migration of the forms to ASP.NET Core 3 which need to be fixed prior to launch.

Issues

[x] Radio Buttons
[x] Required Labels
[x] Form Validation Errors
[x] grid-container grid-x

Radio Buttons

The _forms.scss file has a selector for radio buttons that assumes that the <label /> will come after the <input />. This is fine for checkboxs, which are also included in the selector. But it isn't the preferred pattern for radio buttons since it doesn't provide a convenient way of connecting the label with an individual radio button. Instead, with the new forms, we're using the following:

<label><input name="…" value="…" type="radio" />…</label>

Given this, the radio button selectors need to be updated to use .radio label+[type=radio] instead of .radio [type=radio]+label.

Required Labels

Currently, required labels are prefixed with an asterisk in the markup. We could continue to do this, but ideally we'd instead implement a simple CSS selector that prepends an asterisk to any labels associated with a required field. Worst case, we can annotate these as class="Required", but preferably we'll instead select against jQuery-Validation-Unobtrusive's data- attributes so that this requires minimal markup.

Form Validation Errors

The new forms no longer use Ignia's client-side validation library for ASP.NET WebForms, instead using the out-of-the-box jQuery-Validation-Unobtrustive library. This means that fields that fail form validation have different classes associated with them and, thus, are no longer being picked up by the appropriate styles in _forms.scss. Styles should account for form fields, (new) inline errors, and validation summaries.

`grid-container grid-x`

If the PageBodySection is overwritten, and the form is wrapped in a <section class="panel body">, then everything renders and works properly. If, however, the form content is placed directly in the body, and is rendered in _Layout.cshtml using @RenderBody(), then the checkboxes (and their labels) stop working. The main difference here is that the <section /> is wrapped in:

<div class="grid-container">
  <div class="grid-x">
    @RenderBody()
  </div>
</div>

It is unexpected that adding grid-container and/or grid-x would interfere with the checkboxes and their labels. This could suggest a problem in the selectors.

JeremyCaney commented 4 years ago

@ktrunkey: I identified a further issue with the forms CSS, which I've added to this issue. Basically, if the forms are wrapped in grid-container grid-x (as used by the default @RenderBody() section of the _Layout.cshtml), then the (fancy) checkboxes and their labels don't work. In general, I'm not sure I understand the difference between grid-container grid-x (as used in the default renderer) and panel body used in almost every view page.

JeremyCaney commented 4 years ago

@ktrunkey: I’ve implemented the basic requirements for both the required fields as well as the error handling. It could probably use a bit of additional cleanup, and I may extend the validation scripts to mark labels as errors, but it’s 90% there.

GoldSim / Website