问题描述:

I want to append an icon to a SimpleForm form field using Twitter Bootstrap. Here is the solution that I found in another SO question:

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

However, when I add this piece of code to my form, the validation kicks in but the message is not shown for that particular field. Any ideas on what's happening please?

Update

Here is the HTML generated:

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

As you can see, the error message is generated. But for some reason, the span that contains the error message gets applied the following styles:

.input-append, .input-prepend {

font-size: 0;

white-space: nowrap;

}

Even though it's outside the input-append div... Any ideas what's happening?

Update 2

The error message was in fact in an input-append div, which I removed. Now the error message appears but it's below the input, not inline like regular inputs...

相关阅读:
Top