Fomantic-ui: Check box is not center aligned in form

[hajanajubudeen88]

Bug Report

In the fiddle i created four fields form and in that 3 text field and one check box, in that checkbox is not aligned properly, below the details to reproduce the issue

Steps to reproduce

1. I created four fields form with 3 text field with one checkbox
2. All the four fields have the header label like First Name, Last Name etc.,
3. Whenever i created the checkbox with header label ( 'Check Box' ) the alignment is collapsed

1. if i remove the header label( Check Box ), its working properly with center alignment

Expected result

( OR )

Actual result

Please help me to fix the issue with label and center aligned check box, Thanks

Testcase

https://jsfiddle.net/hajanajubudeen88/n092dprh/11/

[maidzen]

add this to your css

.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox  {
  margin-top: 0.8em;
}

[GammaGames]

When I added it I thought people would be using the label inside the .ui.checkbox div because it's required to make the checkbox show up. Maybe we'd want to add an exception for a fitted checkbox? For example:

.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.fitted.checkbox {
  margin-top: 0.7rem;
}

I'm not sure, because this seems like a somewhat small exception.

Here's an updated fiddle https://jsfiddle.net/Luhzqgn9/

[lubber-de]

With slight adjustments of @GammaGames ' fiddle it doesn't even need the fitted variant of checkbox, so an additional label beside the checkbox is still working

.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.checkbox {
  margin-top: 0.7rem;
}

See https://jsfiddle.net/4poqja0t/

Who volunteers for a PR ? 😉

[hajanajubudeen88]

@lubber-de , @GammaGames , @maidzen Its working Thanks