Inconsistent checkbox placement when a hidden element is between a legend and .form-check
Created by: tegandbiscuits
- Operating system: macOS 10.15.6
- Browser: Chrome 84.0.4147.105
In the alpha for 5.0.0 when a legend
is followed by a hidden element (tested with .d-none
and input[type="hidden"]
) and div.form-check
, then the checkbox will be on the same line as the legend
but not the label
, and also makes the checkbox not clickable (though it's possible to check by focusing on it). This seems to be the case with normal checkboxes and switches.
Example problematic markup:
<form>
<fieldset>
<legend>Unexpected</legend>
<p class="d-none">Hello</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="foo">
<label class="form-check-label" for="foo">Foo</label>
</div>
</fieldset>
</form>
Produces this
I would expect it to lay out like this (and also be clickable)
Code Pen https://codepen.io/tegandbiscuits/pen/poygjPE
The current behavior is also not what happens with checkboxes in Bootstrap 4.
Also this seems to be able to be resolved by wrapping both the hidden element and .form-check
in a div
.