Bootstrap: Inconsistent checkbox placement when a hidden element is between a legend and .form-check

[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.

[ffoodd]

We're basically using an uncontained float for checkboxes and radio buttons, which may cause troubles as you spotted :+1:

[mdo]

@ffoodd I think this is more likely caused by the float on the <legend> than the checkbox.

[ffoodd]

@mdo you're right, been too qucik on this. We're trying to clear the float with legend + * { clear: left; }, which has no effect on a hidden element…

Not sure about a potential fix here:

1. our clearfix won't work either,
2. we do not have any clear utilities,
3. avoiding this case with CSS would result in a bloated selector, eg:

legend + *:not(.d-none):not([hidden]):not([type="hidden"]), 
legend + .d-none + *, 
legend + [hidden] + *,
legend + [type="hidden"] + * {
  clear: left;
}

Maybe adding clear utility would be a better fix, to allow user to manually clear their floats in edge cases?

[mdo]

I think we might need to look at changing the <legend> changes we made. I feel like that was done relatively recently. Won't have time to play with it more for a little bit.

[ffoodd]

Tried something using display: contents but then realized support is pretty bad and buggy…

There might be a better way using grid or something, not sure yet.

TBH, I'd be in favor of dropping float: left here, since our standard build does not need it —no borders on fieldset— and it can be easily managed using .float-left utility (which would then be opt-in).

The better way around IMHO would be to add clear utilities.

[mdo]

Let's drop that float and that should fix it. Wanna open a PR @ffoodd or should I?

[ffoodd]

Please do @mdo, I won't be able to do it until next week or so — or simply wait for a week. ;)

[mdo]

Thinking about this specific example again, you might just want to add a good ol' fashioned <div class="clearfix"></div> before the hidden element. That'll fix the issue.