6

I'm converting my site to Twitter Bootstrap 3, and have run into what seems like silly problem, but I haven't been able to find an easy solution via google.

How do I get class="form-control" to be populated by default in the Rails Form Helper? I can only do it by typing it explicitly, this seems like a waste of time. (below)

It is required for bootstrap to style the input.

 <%= f.label :email %>                                     
 <%= f.text_field :email, class: "form-control" %>   

Am I naive to think that Rails should add this feature just because bootstrap implemented it?

5 Answers 5

10

Yup, this can be done without changing the way you use the Rails form helpers. You can extend the form helpers to include the class name if it is not already included in the options.

Note: You will have to override each method in FormTagHelper that you want to augment. This only augments text_field_tag.

Add something like this to your ApplicationHelper:

module ApplicationHelper

  module BootstrapExtension
    FORM_CONTROL_CLASS = "form-control"

    # Override the 'text_field_tag' method defined in FormTagHelper[1]
    #
    # [1] https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/form_tag_helper.rb
    def text_field_tag(name, value = nil, options = {})
      class_name = options[:class]
      if class_name.nil?
        # Add 'form-control' as the only class if no class was provided
        options[:class] = FORM_CONTROL_CLASS
      else
        # Add ' form-control' to the class if it doesn't already exist
        options[:class] << " #{FORM_CONTROL_CLASS}" if
          " #{class_name} ".index(" #{FORM_CONTROL_CLASS} ").nil?
      end

      # Call the original 'text_field_tag' method to do the real work
      super
    end
  end

  # Add the modified method to ApplicationHelper
  include BootstrapExtension

end
2
  • This worked for me, except that you need to override text_field in form_helper.rb, not text_field_tag
    – wiredin
    Sep 18, 2013 at 1:27
  • I made the changes to your answer. Thanks!
    – wiredin
    Sep 18, 2013 at 1:28
4

To get the class added to all form elements, even if those form elements are generated by gems like simple_form, the modification has to be done on a higher-level class than the ApplicationController. The following snippet can be placed in an initializer to do just that:

require 'action_view/helpers/tags/base'
# Most input types need the form-control class on them.  This is the easiest way to get that into every form input
module BootstrapTag
  FORM_CONTROL_CLASS = 'form-control'
  def tag(name, options, *)
    options = add_bootstrap_class_to_options options, true if name.to_s == 'input'
    super
  end

  private

  def content_tag_string(name, content, options, *)
    options = add_bootstrap_class_to_options options if name.to_s.in? %w(select textarea)
    super
  end

  def add_bootstrap_class_to_options(options, check_type = false)
    options = {} if options.nil?
    options.stringify_keys!
    if !check_type || options['type'].to_s.in?(%w(text password number email))
      options['class'] = [] unless options.has_key? 'class'
      options['class'] << FORM_CONTROL_CLASS if options['class'].is_a?(Array) && !options['class'].include?(FORM_CONTROL_CLASS)
      options['class'] << " #{FORM_CONTROL_CLASS}" if options['class'].is_a?(String) && options['class'] !~ /\b#{FORM_CONTROL_CLASS}\b/
    end
    options
  end
end

ActionView::Helpers::Tags::Base.send :include, BootstrapTag
ActionView::Base.send :include, BootstrapTag
1

Yes, it's a waste of time.

Use simple_form gem which integrate nicely with Bootstrap. You no longer need to write these.

After bundle, just run

rails generate simple_form:install --bootstrap

Then a simple_form initailizer will be added. You can further customize it in initializers/simple_form_bootstrap, though default is good enough.

All these helper classed will be generated automatically, as well as many other good stuff.

1
  • As of Oct 4, 2013, simple_form still doesn't integrate nicely with Bootstrap 3. I've gone back to writing forms longhand, and plan on factoring them down to something manageable with custom form builders in the future.
    – jrhorn424
    Oct 4, 2013 at 4:15
1

You can use one of the Bootstrap related Gems such as this one:

https://github.com/stouset/twitter_bootstrap_form_for

or this one:

https://github.com/sethvargo/bootstrap_forms

0

The previous two answers will indeed work very well (simple form using your own initializer or use the bootstrap form gems). As with anything in code, there are many ways to skin a cat. Another (more manual) way is to add a form helper of your own. The steps are basically:

  1. Create a helper file such as app/helpers/custom_form_helper.rb
  2. Inherit from the form builder class: CustomFormBuilder < ActionView::Helpers::FormBuilder
  3. Create the look you want.

    def text_field(label, *args)
      options = args.extract_options!
      new_class = options[:class] || "form-control"
      super("dd", label, *(args << options.merge(:class => new_class)))
    end
    
  4. Call your helper method in application so you don not have to include the helper each time you call a form, like:

    def custom_form_for(name, *args, &block)
      options = args.extract_options!
      content_tag("div",
      content_tag("dl", form_for(name, *(args << options.merge(:builder => CustomFormBuilder)), &block)), :class => "standard_form")
    end
    
  5. Use the custom form in your forms as custom_form_for

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.