3

3.2アプリでTwitterBootstrapfor 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" %>

これが実際の例です。「平方フィートを一覧表示する」というテキストのすぐ横に、チェックボックスがあります。アメニティまで下にスクロールすると、明らかにチェックボックスが必要なリストが表示されます。

これは開発でも機能しません。

なぜ表示されないのかよくわかりません。

考え？

4

3 に答える 3

5

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>

そして、次のCSSルールを設定しますdiv.checker span：

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

その画像がないため、入力が見えないように見えます。

于 2013-02-11T10:03:00.577 に答える
0

実際には、チェックボックスがありますが、マージンプロパティのために非表示になっています。

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

したがって、マージンサイズを削除または変更します

以下を参照、Firebugを使用したFF

ここに画像の説明を入力してください

于 2013-02-11T10:26:13.203 に答える