Clever Geek Handbook

What can you do to prevent checkboxes from showing on the page?

I am using Twitter Bootstrap for Rails in a 3.2 app and I cannot see these checkboxes.

If I look at the same page in straight HTML only (with checkboxes hardcoded and using regular Bootstrap resources) it works great.

The HTML code is generated correctly, I believe ... for example:

<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's the Rails code:

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

Here's a live example . There should be a check mark next to the text "List of square meters". Scroll down to convenience and there you will see a list that obviously should have checkboxes.

This also doesn't work in development.

Not really sure why he doesn't show up.

Thoughts?

+3


source to share


3 answers


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

Try disabling uniform.js if you are not using it.

Update: Also looks like you are getting 404 in the sprite image? Probably a figurative image of the same theme?

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

Another update: This is definitely a problem. Uniform works by making the input opacity 0 so it's invisible but still clickable and changes the markup a 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 the css rule to div.checker span

:

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

This image is missing, so the entrance appears to be invisible.

+5


source


actually the problem is you have checkboxes but hidden because of the margin property

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

to remove or resize the field



see below FF with firebug

enter image description here

0


source 


$('input[type="checkbox"]').css("visibility","visible");
0


source






More articles:


All Articles