New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inconsistent checkbox placement when a hidden element is between a legend and .form-check #31472
Comments
We're basically using an uncontained |
@ffoodd I think this is more likely caused by the |
@mdo you're right, been too qucik on this. We're trying to clear the float with Not sure about a potential fix here:
legend + *:not(.d-none):not([hidden]):not([type="hidden"]),
legend + .d-none + *,
legend + [hidden] + *,
legend + [type="hidden"] + * {
clear: left;
} Maybe adding |
I think we might need to look at changing the |
Tried something using There might be a better way using TBH, I'd be in favor of dropping The better way around IMHO would be to add |
Let's drop that float and that should fix it. Wanna open a PR @ffoodd or should I? |
Please do @mdo, I won't be able to do it until next week or so — or simply wait for a week. ;) |
Thinking about this specific example again, you might just want to add a good ol' fashioned |
In the alpha for 5.0.0 when a
legend
is followed by a hidden element (tested with.d-none
andinput[type="hidden"]
) anddiv.form-check
, then the checkbox will be on the same line as thelegend
but not thelabel
, 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:
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 adiv
.The text was updated successfully, but these errors were encountered: