Extra Width Layout

Question

I use a best-of-breed rail to handle inline editing.

as you can see in this example, the input element appears as soon as you click on the best text: http://bipapp.heroku.com/users/49

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

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

Answer 1

I just checked your problem with a developer tool, starting with styles.css the style for inline text is loading. and width: 80%. I am sure that if you reduce this, your problem will be solved.

Answer 2

If you look at the best_in_place GitHub page , this stone supports the following options that will help you:

• : html_attrs: hash of html arguments, such as maxlength, default value, etc., that will be set on the rendered input, and not in the best_in_place range.
• : inner_class: a class that is configured for visualized input.

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