.invalid-feedback doesn't show for .input-group with an invalid control #29439
Description
I'm reposting an outstanding bug that is documented in #23454 (closed). That issue has received ALOT of attention over a two year period but has not received a resolution.
Original issue:
Example:
<div class="form-group col-md-4">
<label class="form-control-label is-invalid" for="valuation_value">Estimated Value</label>
<div class="input-group is-invalid">
<span class="input-group-addon">£</span>
<input class="form-control is-invalid" min="0" type="number" value="" name="valuation[value]">
</div>
<div class="invalid-feedback">can't be blank, is not a number</div>
</div>Results in:
I would expect to see can't be blank, is not a number under the input-group.
Summary of working hacks:
There are two working solutions (aka hacks) to get the invalid-feedback displaying for custom-file with an input-group-append.
- Adding the
flex-wrapclass to thecustom-fileand adding thew-100class to theinvalid-feedbackelement.
<div class="section measurements-area" style="display: none">
<h4>Measure your test sample and upload the csv file</h4>
<form id="measurements-form" class="needs-validation" novalidate>
<div class="input-group input-group-sm">
<div class="custom-file flex-wrap">
<input type="file" class="custom-file-input" id="measurements" required>
<div class="invalid-feedback w-100">
The measurements file is required.
</div>
<label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
</div>
</div>
</form>
</div>- Adding
style="position: absolute; top: 3.0em"to theinvalid-feedbackelement.
<form id="measurements-form" class="needs-validation" novalidate>
<div class="input-group input-group-sm">
<div class="custom-file">
<input type="file" class="custom-file-input" id="measurements" required>
<div class="invalid-feedback" style="position: absolute; top: 3.0em">
The measurements file is required.
</div>
<label class="custom-file-label" for="measurements" data-browse="Browse">Upload measurements</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit" id="recalibrate">Recalibrate</button>
</div>
</div>
</form>The downside to both of these is that invalid-feedback element no longer takes up space so elements below the custom-file don't accommodate by moving down to maintain expected spacing.
Furthermore, The following solutions DO NOT work for custom-file:
-
Adding the class
d-blockord-flexto theinvalid-feedbackelement.
.input-group {
flex-wrap: wrap!important;
}
.input-group .invalid-feedback {
flex-basis: 100%!important;
}Also, the invalid-feedback element already has the property display: block.