3

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?

1
  • No error. It is just not showing up. Well...on my localhost, the error is a missing sprite.png, but I doubt that is related. Feb 11, 2013 at 10:07

3 Answers 3

5

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.

6
  • Hrmm...this is gonna sound like a weird question...but....is it setting a particular class or ID to an opacity of 0? Also, I had checked the opacity value in the regular HTML version and it too was set to 0, but it showed up. Feb 11, 2013 at 10:07
  • Looks like it's set inline on the input element as well as on .checker input. Feb 11, 2013 at 10:12
  • So, is the solution to make sure that image is there, or to remove the uniform.js file? The thing is, apparently it's a jquery.uniform.min.js file, so I assume something else may be broken by removing it. What alternatives are there other than removing it altogether? Feb 11, 2013 at 10:22
  • It depends whether you want to use uniform.js or not. If you do, make sure the image is there. If you don't, remove the js file, or at least prevent it from being included in your app. Feb 11, 2013 at 10:23
  • Argh....so this is the weirdest thing. I don't want to remove the js file altogether....but when I do it works. I fixed the path to the image, which was wrong, and I no longer get that 404 error. But when I put back the js file, the checkbox disappears once again. Can't I override it with a CSS class or something? Rather than getting rid of the JS file altogether? Btw, if you can't tell, I never did the front-end code on this. I was given this code to work with. So I don't want to remove it, for fear of it breaking something else. Feb 11, 2013 at 10:28
0

actually the problem in you have the check boxes but its hidden, due to the margin property

input[type="checkbox"] {
    float: left;
    #margin-left: -20px;
}

so remove or change the margin size

see below, FF with firebug

enter image description here

1
  • Nah...that wasn't it. It was the missing sprite.png that was tripping up everything. Thanks though. Feb 11, 2013 at 10:34
0
$('input[type="checkbox"]').css("visibility","visible");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.