2

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-appenddivの外にありますが...何が起こっているのか考えはありますか?

アップデート2

エラーメッセージは実際にはinput-append私が削除したdivにありました。これでエラーメッセージが表示されますが、通常の入力のようにインラインではなく、入力の下にあります。

4

0 に答える 0