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.