add formtastic-bootstrap styles to formtastic 3

Question

I have an input that looks like this:

<%= f.input :email %>

The output I get from formtastic(v3.1.5) and rails(v4.2) looks like this.

<li class="email input required stringish" id="applicant_email_input">
  <label for="applicant_email" class="label">Email<abbr title="required">*</abbr></label>
  <input maxlength="255" id="applicant_email" type="email" value="[email protected]" name="applicant[email]">
</li>

What I really want is for formtastic to emit:

<div class="email input required stringish form-group" id="applicant_email_input">
  <label for="applicant_email" class=" control-label">Email<abbr title="required">*</abbr></label>
  <span class="form-wrapper">
    <input maxlength="255" id="applicant_email" type="email" value="[email protected]" name="applicant[email]" class="form-control">
  </span>
</div>

This is what this app emmitted with formtastic(v2.3.1) and formtastic-bootstrap(v3.0.0) and rails(v4.1).

I'd love to just include the gem for formtastic-bootstrap and get that old behavior back, but near as I can tell, formtastic-bootstrap dropped out around formtastic 3.

Now I have an app with a couple thousand calls to f.input, and I need to massage the output coming from formtastic. What's the best way to do that?

Answer 1

Here is a hacked version of formtastic I have named boomtastic which will do what you want.

(This actually includes all that you require except for the form-wrapper. However, the form-wrapper seems to be an element of bootstrap-formtastic only and not part of formtastic or standard bootstrap. If you really want to have the <span class="form-wrapper">, I think you can add this by editing boomtastic/lib/formtastic/inputs/base/wrapping.rb.)

Answer 2

What about a solution that uses jquery to change your form at page reload?

var ready = function () {
    var $input = $('#applicant_email');
    var input_html = $input.html();
    $input.html('<span class="form-wrapper">' + input_html + '</span>');
}

$(document).on('turbolinks:load', ready);

You need to tell me how you want to select those fields, because in your example you did not include the full html and any explanation of the real problem.

I also see that the other divs have some other classes, that can be done with some easy jquery

Otherwise you can edit that gem

Answer 3

Maybe you could use formtastic's custom input? Also, these links might help: https://github.com/justinfrench/formtastic/blob/master/lib/formtastic/helpers/input_helper.rb and https://github.com/justinfrench/formtastic/issues/625.

Specifically, Justin French recommends that you monkey patch your app with an initializer in config/initializers/formtastic_patches.rb that would look something like this:

module Formtastic
module Inputs
module Base
module Wrapping
def input_wrapping(&block)
template.content_tag(:li,
[template.capture(&block), error_html, hint_html].join("\n").html_safe,
wrapper_html_options
)
end
end
end
end
end

And then switch the :li for a :div.