Prepended input label (simple_form + bootstrap-sass) off by a few pixels

Question

I want to use the text input field seen here:

http://simple-form-bootstrap.plataformatec.com.br/articles/new

(It's the second text input field on that page.)

I have it working in other Rails apps but for some reason in my current one there is a several-pixel gap between the prepended label and the text input. I've installed simple_form with the --bootstrap option, and have verified that the Rails/haml/bootstrap/bootstrap-sass versions are the same as the working rails app.

I don't override any of the related css in my stylesheets (I commented it all out to be sure).

Any ideas why Bootstrap isn't behaving as it should?

Answer 1

I don't really know what the problem is here, but I had the same thing.

Comparing the span.add-on tag I found that they had a float: left on theirs. I added that and it seemed to do the trick.

I also noticed they are using twitter 2.01. I'm using 2.02, so something might have changed.

EDIT: That messed up the append span.

.input-prepend .add-on,
.input-append input {
  float: left;
}

Is what I added. It doesn't feel right, but it's working for now. Hopefully someone else more knowledgeable of bootstrap can help out.

Answer 2

I have not looked at the changes to see why, but I can confirm that it works as expected in 2.0.1 and has the described gap in 2.0.2. To revert to the old, correct behavior you can replace the existing bootstrap-sass line in your Gemfile with:

gem 'bootstrap-sass', '2.0.1'

and update your bundle.

Answer 3

You need to add this: content_tag :span, "attribute", :class => "add-on", :style => 'margin-right: -5px;'

Answer 4

The accepted solution will cause problems if there is an error on the page due to validations. Simple_form actually has a wrapper that will allow you to do this and is much better when handling errors.

<%= f.input :name, :wrapper => :append, :class => "inline" do %>
    <%= f.input_field :name%>
    <%= content_tag :span, "@", :class => "add-on abbn" %>
<% end %>