Vertical alignment of radio/checkbox broken

[drauch]

Bug reports must include:

• Operating system and version: Windows 10
• Browser and version: Chrome 70
• Reduced testcase: https://getbootstrap.com/docs/4.0/components/forms/#default-stacked

Even in the default theme it is visible that the radio/checkbox controls are slightly located upwards compared to the label text. It becomes more apparent if you use a custom theme.

[XhmikosR]

Confirmed, just note that v4.0 is quite old. Also happens with Firefox on Windows 10 for me.

Current v4-dev live preview https://twbs-bootstrap4.netlify.com/docs/4.1/components/forms/#default-stacked

[XhmikosR]

@twbs/css-review: using margin-top: .5rem fixes the issue for me, but I'm not sure about other OS'es.

[MartijnCuppens]

Chrome on windows:

Chrome on mac:

The height and width of the checkbox on windows is 13px, on mac it's 14px. I don't know if there is a way to create a solution for all OS'es 🤔

[drauch]

@MartijnCuppens: maybe fix it with JavaScript? ¯_(ツ)_/¯

[herbalite]

https://stackoverflow.com/questions/306924/checkbox-size-in-html-css
@MartijnCuppens Above a link to SO with some approaches. Don't think any of them are without issues though, but if it points into the right direction it's worth to check it out.

[trollwinner]

Hello everyone!

I don't know if somebody met this issue before but I see the custom controls might have a problem with the alignment with some font-families. Here is an example of "monospace":

This extra property should help with it.

.custom-control-label {
    line-height: $font-size-base * $line-height-base;
}

[arcanisgk]

I have detected in V4.5 that it is not the only problem; even if we want to place the checkbox in the same row as an input or a Label of normal dimensions; it turns out that the checkbox goes crazy and does not align vertically or horizontally in the markup:

https://stackoverflow.com/questions/64579724/bootstraps-v4-5-checkbox-cannot-be-aligned-horizontally-or-vertically-when-next

[mdo]

Going to consider this one a won't fix given v5 revamped our checks and radios to be custom, consistent sizes.

[XhmikosR]

I'd say this is still a valid 4.x bug and should be tackled @mdo.

[mdo]

Given how the components are built, there's not really much flexibility here when v4 has two checkbox and radio components. We're absolutely positioning elements that have variable sizes. The only solution really is the custom forms in v4 and our unified forms in v5. You can see the referenced PR from @MartijnCuppens was closed too because it introduced new issues.

[XhmikosR]

All right, closing then. I wish there was a way to fix this issue in v4 too.