List of checkboxes in HTML.haml

Question

I've been working on an application in ruby on rails and trying to display list of check boxes like this
[ ] Conflict Resolutions

[ ] Customer Know how

[ ] personal Branding

But I managed to get this

Conflict Resolution

[ ]

Customer Know How

[ ]

Personal Branding

[ ]

My html.haml file looks like this

.col-md-6.col-md-offset-3
= form_for(@user) do |f|
  = f.label :conflict_resolution, 'Conflict Resolution'
  = f.check_box :conflict_resolution
  = f.label :customer_know_how, 'Customer Know How'
  = f.check_box :customer_know_how
  = f.label :personal_branding, 'Personal Branding'
  = f.check_box :personal_branding

Tried Display:inline for inputtype = checkbox . Didn't work out!!

Answer 1

Use

input[type='checkbox'] { display: block; float: left; }
input[type='checkbox'] + label { display: block; }

If you don't want this to affect the visual representation of checkboxes and following labels on other parts of your application (that uses the same css), you need to give the rule some html context by preceding both rules with a selector matching it's parent (that is different from all other parents on other pages/parts of the application).

Answer 2

If you can change your haml a more elegant solution would be having the label element wrapped around the checkbox so if you click the label it activates the box.

here's how you can do that:

= form_for(@user) do |f|
  = f.label(:conflict_resolution) do
    = f.check_box :conflict_resolution
    Conflict Resolution
  = f.label(:customer_know_how) do 
    = f.check_box :customer_know_how
    Customer Know How
  = f.label(:personal_branding) do
    = f.check_box :personal_branding
    Personal Branding