Creating the best_in_place input file looks like bootstrap input

Question

Currently and by default, best_in_place works like

before editing

once in edit mode it looks like

I would like to like the usual (vanilla) boot input before editing

and in edit mode it will look like editing a regular input window

Unfortunately, all my attempts to combine css and javascript have failed.

I cannot set the div capture as .form-control since it will look like

, (/ .. , click away ( ) , , , ,

jsfiddle http://jsfiddle.net/E8W4X/5/ (.form-control ) (a div.form-control)

javascript best_in_place

- , , Tim

, " ",

html jsfiddle

<div class="row">
    <div class="col-lg-2">
        <div class="panel">
            <fieldset>
                <div class="form-group">
                      <label>before edit mode</label>
                    <div class="form-control">
                        Tim
                    </div>


                    <label>edit mode</label>
                    <div class="form-control">
                        <form class="form_in_place" action="javascript:void(0);" style="display:inline">
                            <input type="text" name="first_name">
                        </form>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>

Answer 1

JavaScript CSS. . :inner_class, . Bootstrap CSS .form-control .

HAML, ERB SLIM.

= best_in_place @user, :name, type: :input, inner_class: 'form-control'

.

Answer 2

, .

, , , , , @line # 317

output.parents('div.form-control').removeClass('form-control');

@ # 336

event.target.closest( 'DIV') addClass ( ' ');.

jQuery(event.target).closest('div').addClass('form-control');

fiddle