making best_in_place input look like bootstrap input
best-in-place, css, javascript, jquery, twitter-bootstrap
Solution
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.
Problem
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> ```