Bulma: Checkbox horizontal spacing

[mnpenner]

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.5.1]

My browser is: Chrome 60

I am sure this issue is not a duplicate? :man_shrugging: I did search

Description

Radio buttons are nicely spaced when placed horizontally, but checkboxes are not.

Please add

.checkbox + .checkbox {
    margin-left: .5em;
}

Steps to Reproduce

<div class="field is-horizontal"><div class="field-label"><label class="label">Likes</label></div><div class="field-body"><div class="field"><div class="control"><label class="checkbox"><input type="checkbox" value="on"><!-- react-text: 69 --> Hockey<!-- /react-text --></label><label class="checkbox"><input type="checkbox" value="on"><!-- react-text: 72 --> Soccer<!-- /react-text --></label><label class="checkbox"><input type="checkbox" value="on"><!-- react-text: 75 --> Football<!-- /react-text --></label></div></div></div></div>

Expected behavior

Margins between .checkbox labels.

Actual behavior

No spacing.

[jgthms]

You should keep whitespace between checkboxes and not remove it when minifying.

[mnpenner]

@jgthms I'm not minifying. React/JSX doesn't include spaces.

[jgthms]

You should be able to keep whitespace between text and elements.

[mnpenner]

There is whitespace between the text and checkbox, but between labels you'd typically use a loop in React which won't preserve the space unless you explicitly insert one.

You've got a rule for radios, I'm just not sure why there isn't one for checkboxes too. Wouldn't that make the framework more consistent, if nothing else?

[allenfantasy]

+1 for this issue. Since bulma got rules for inline radios it should provide same rules to checkboxs as well -- to keep the presence consistent in different fields in a form.

[PascalLeMerrer]

I love Bulma, but I don't understand why you don't want to fix this.
I had the issue too, with different framework and languages (Vue JS, ELM). Being forced to add a space in front of each element when you iterate on a list is definitely not elegant.
Moreover, when you look at Bulma's documentation, it's not obvious you need a space.

[tspesh]

Just to pile on, would be nice to have a CSS solution to this.

[mobayen]

the fix is so simple:

// current
.radio
  & + .radio
    margin-left: 0.5em

// fix
.checkbox + .checkbox,
.radio + .radio
    margin-left: 0.5em

it would be nice if we have it included in bulma core though

[dlishtvan]

More simple and pretty solution

  &[type="checkbox"],
  &[type="radio"]
    margin-right: .5em

[sgurukrupa]

I confirm this issue is still there in version 0.9.1