making best_in_place input look like bootstrap input

Question

Currently and defaultly, best_in_place works as

before edit

once in edit mode it looks like

What I would like is that the before edit would like like a regular (vanilla) bootstrap input

and in edit mode it would look like editting a regular input box

unfortunatly, all my attempts of combining css and javascript have failed..

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

I couldn't figure out what event to listen to when clicking on the field (focus/blur didn't work.. click works but then I need a click away type event (is there such an event) listening on the change event would only work when the field is changed, but when it is clicked yet not changed it would misbehave

This is a jsfiddle http://jsfiddle.net/E8W4X/5/ to simulate the before edit (.form-control with the text) and the edit mode (a form is automatically injected into div.form-control)

the fiddle has the best_in_place javascript

edit mode in the fiddle is what happens when you click on Tim

What I would like is it to look like the input box in "desired styling" which is basically a normal input box

and here is a html from the 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

You do not need JavaScript or new CSS classes to solve this. The gem supports additional attributes to the options hash. You want to add :inner_class to change the class of the form field. Bootstrap uses the CSS class .form-control to apply its custom look.

My solution will be in HAML, but you can also so the same in ERB or SLIM.

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

You can even apply attributes globally to all bip form fields.

Answer 2

Okay so FINALLY I managed it.

So look what I did was searched for where it created input box and added class form-control to it @ line# 317

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

and added it back before the blur @ line#336

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

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

Here is the fiddle