2

我想使用 Twitter Bootstrap 将图标附加到 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