Vertical spacing for form with both p.text-help and p.text-muted is broken
Created by: tordans
A form layout we use very regularly is an input with a help-text below which also can have an error message.
Right now, the error case looks like this:
IMO the spacing is broken, it should look like this:
The generated html for this case is:
<div class="form-group string required registration_name has-danger">
<label class="string required sr-only form-control-label" for="registration_name">Name</label>
<input class="string required form-control-lg form-control" placeholder="Name" type="text" value="" name="registration[name]" id="registration_name">
<p class="text-help">can't be blank</p>
<p class="text-muted">Lorem</p>
</div>
A possible css fix might be something like this:
p.text-help ~ p.text-muted {
margin-top: -16px;
}
Note: I cannot just add a .m-b-0
in this case since the html is generated by simple_form which has no way of distinguishing those cases.
Questions:
- Is there a "proper" way to write this kind of form? What would be a better alternative to the P-Tags that uses the default-font-sizing but not the P-Tag-Margins?
- Is this a usage that should be fixed in Bootstrap4 with specific css or should I work around it in my custom css?