best-in-place extra width kills layout

Question

I am using the best-in-place rails gem to handle inline-editing.

as you can see in this example, an input element pops up as soon as you click on a best-in-place text: http://bipapp.heroku.com/users/49

the width of this input field exceeds the width of the text it replaces and thereby extends the width of the parent element. (this can make it very annoying for the user to open one input field after another, since the layout can change after each click)

What I want to accomplish is, that this input field always has the exact same width as the text it replaces, so that it does not affect the layout at all. is that possible?

Answer 1

If you look at the best_in_place GitHub page, the gem supports the following options that would address your need:

1. :html_attrs: Hash of html arguments such as maxlength, default-value, etc. that will be set on the rendered input not the best_in_place span.
2. :inner_class: Class that is set to the rendered input.

This is how you control the appearance. And yes, you can use some global CSS defaults for cases where the style is part of the theme. In that case you have something like span.best_in_place > form.form_in_place > input[type="text"] to work with.