What could make checkboxes not show on the page?

Question

I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.

If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.

The HTML code is produced correctly, I believe...e.g.:

<div class="field">
    <div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
  </div>

Here is the Rails Code:

<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>

Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.

This doesn't work in development either.

Not quite sure why it's not showing up.

Thoughts?

Answer 1

Looks like uniform.js is setting the opacity of the checkbox to 0.

Try disabling uniform.js if you're not using it.

Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?

GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found) 

Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.

<div class="checker" id="uniform-listing_amenity_ids_4">
  <span>
    <input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
  </span>
</div>

And it sets a css rule on div.checker span:

div.checker span {
  background-image: url(../img/sprite.png);
}

That image is missing, so the input appears to be invisible.