TwitterBootstrapを使用してSimpleFormフォームフィールドにアイコンを追加したいと思います。これが私が別のSOの質問で見つけた解決策です:
<div class="input-append date" id="birthday-picker" data-date="06-04-1986" data-date-format="dd-mm-yyyy">
<%= f.input :birthday, :wrapper => :append do %>
<%= f.input_field :birthday, as: :string, placeholder: "06-04-1986", readonly: true %>
<span class="add-on"><i class="icon-th"></i></span>
<% end %>
</div>
ただし、このコードをフォームに追加すると、検証が開始されますが、その特定のフィールドのメッセージは表示されません。何が起こっているのかについて何かアイデアはありますか?
アップデート
生成されるHTMLは次のとおりです。
<div class="input-append date" id="birthday-picker" data-date="06-04-1986" data-date-format="dd-mm-yyyy">
<div class="control-group date required error">
<label class="date required control-label" for="user_birthday">Birthday <abbr title="required">*</abbr></label>
<div class="controls"><div class="input-append">
<input class="string required readonly" id="user_birthday" name="user[birthday]" readonly="readonly" size="50" type="text" value="31-03-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span class="help-inline">You are too young</span>
</div>
</div>
ご覧のとおり、エラーメッセージが生成されます。ただし、何らかの理由で、エラーメッセージを含むスパンは次のスタイルで適用されます。
.input-append, .input-prepend {
font-size: 0;
white-space: nowrap;
}
それはinput-append
divの外にありますが...何が起こっているのか考えはありますか?
アップデート2
エラーメッセージは実際にはinput-append
私が削除したdivにありました。これでエラーメッセージが表示されますが、通常の入力のようにインラインではなく、入力の下にあります。