什么会使复选框不显示在页面上？答案

【问题标题】：What could make checkboxes not show on the page?什么会使复选框不显示在页面上？
【发布时间】：2013-01-26 09:57:10
【问题描述】：

我在 3.2 应用程序中使用 Twitter Bootstrap for Rails，但没有看到复选框出现。

如果我只用直接的 HTML（带有硬编码的复选框，并使用常规的 Bootstrap 资源）查看同一页面，它就可以正常工作。

HTML 代码生成正确，我相信...例如：

<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>

这是 Rails 代码：

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

这是live example。在文本“列表平方英尺”旁边，应该是一个复选框。向下滚动到便利设施，您会在那里看到一个显然应该有复选框的列表。

这在开发中也不起作用。

不太清楚为什么它没有出现。

想法？

【问题讨论】：

没有错误。它只是没有出现。嗯...在我的本地主机上，错误是缺少 sprite.png，但我怀疑这是相关的。

标签： css ruby-on-rails ruby-on-rails-3 html twitter-bootstrap

【解决方案1】：

看起来 uniform.js 将复选框的不透明度设置为 0。

如果您不使用 uniform.js，请尝试禁用它。

更新：看起来您在精灵图像上也得到了 404？可能是统一的主题精灵图像？

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

另一个更新：这绝对是问题所在。 Uniform 的工作原理是将输入的不透明度设为 0，使其不可见，但仍可点击，并稍微更改标记，使其看起来像这样。

<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>

它在div.checker span上设置了一个css规则：

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

该图像丢失，因此输入似乎不可见。

【讨论】：

Hrmm...这听起来像是一个奇怪的问题...但是....它是否将特定的类或 ID 设置为不透明度为 0？另外，我检查了普通 HTML 版本中的不透明度值，它也设置为 0，但它显示了。
看起来它是在输入元素和.checker input上内联设置的。
那么，解决方案是确保图像存在，还是删除 uniform.js 文件？问题是，显然它是一个jquery.uniform.min.js 文件，所以我认为删除它可能会破坏其他东西。除了完全删除它之外，还有什么替代方法？
看你想不想用uniform.js。如果你这样做，请确保图像在那里。如果不这样做，请删除 js 文件，或者至少阻止它包含在您的应用中。
Argh....所以这是最奇怪的事情。我不想完全删除 js 文件....但是当我这样做的时候。我修复了错误的图像路径，并且不再收到 404 错误。但是当我放回js 文件时，复选框再次消失。我不能用 CSS 类或其他东西覆盖它吗？而不是完全摆脱 JS 文件？顺便说一句，如果你看不出来，我从来没有做过前端代码。我得到了这个代码来使用。所以我不想删除它，因为担心它会破坏其他东西。

【解决方案2】：

实际上问题在于您有复选框，但由于边距属性而隐藏了

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

所以删除或更改边距大小

见下文，带萤火虫的 FF

【讨论】：

不...不是这样。是丢失的 sprite.png 让一切都崩溃了。不过还是谢谢。

【解决方案3】：

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

【讨论】：