CODEWITHSUNDEEP
ruby-on-railswrappersimple-form
Max Ivak
Max Ivak

Reputation: 1549

Rails: custom wrapper for submit button in simple_form?

I am using simple_form gem with bootstrap 3. I want to have a wrapper for submit button

Now it shows HTML as

<form id="new_order" ...>
    ...

   <input class="btn btn-primary" type="submit" value="Save" name="commit">
</form>

I want to write a wrapper so the HTML would be:

<form id="new_order" ...>
  ...

  <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
        <input class="btn btn-primary" type="submit" value="Save" name="commit">
     </div>
 </div>

I got this so far:

app/initializers/simple_form_bootstrap.rb:

options[:wrapper] = :horizontal_form
options[:wrapper_mappings] = {
  check_boxes: :horizontal_radio_and_checkboxes,
  radio_buttons: :horizontal_radio_and_checkboxes,
  file: :horizontal_file_input,
  boolean: :horizontal_boolean,

 # what to write here??
 # submit: :horizontal_submit_button

}

and this is my wrapper:

  config.wrappers :horizontal_submit_button, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
     b.use :html5
     b.use :placeholder

     b.wrapper tag: 'div', class: 'col-sm-offset-2 col-sm-10' do |ba|
       ba.use :input
       # some coe goes here, maybe
     end
  end

Which input type to use in wrapper_mappings for submit button? How to write that wrapper?

Upvotes: 18

Views: 3692

Answers (4)

Deepak Mahakale
Deepak Mahakale

Reputation: 23661

As mentioned by @Alex you can add a custom input if you want the wrapper in all the forms.

For a custom solution where you need to add the classes only in a few forms

You can use content_tag to wrap the submit button

<%= f.input :first_name %>
<%= f.input :last_name %>
...
<%= content_tag(:div, class: 'form-group') do %>
  <%= content_tag(:div, class: 'col-sm-offset-2 col-sm-10') do %>
    <%= f.button :submit, value: 'Save', class: "btn-primary" %>
  <% end %>
<% end %>

This will generate the following for the submit (not adding generated HTML for inputs here on purpose)

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <input type="submit" name="commit" value="Save" class="btn btn-primary" data-disable-with="Update User">
  </div>
</div>

Upvotes: 0

Alex
Alex

Reputation: 29766

Simple form button is basic wrapper around rails submit helper. All it does is it adds button_class defined in simple form initializer and send it to submit, here is what it look like right now:

https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/form_builder.rb#L211

def button(type, *args, &block)
  options = args.extract_options!.dup
  options[:class] = [SimpleForm.button_class, options[:class]].compact
  args << options
  if respond_to?(:"#{type}_button")
    send(:"#{type}_button", *args, &block)
  else
    send(type, *args, &block)
  end
end

There is no logic for using wrapper api here. But that if statement lets you define your own button method. If you use f.button :submit in your forms than put this in an initializer (or decorator so you don't have to restart the server while customizing):

module SimpleForm
  class FormBuilder
    def submit_button(*args, &block)
      ActionController::Base.helpers.content_tag(:div, class: 'form-actions') do
        submit(*args, &block)
      end
    end
  end
end

You don't have to use content_tag helpers, any html_safe string will work.

Upvotes: 1

ernestocid
ernestocid

Reputation: 31

Apparently it is not possible to have a wrapper for buttons using simple_form. I wanted to do the same thing and the solution I found was to replace

config.button_class = 'btn'

with

config.button_class = 'myclass1 myclass2'

in the config/initializers/simple_form.rb file. The problem is that it will be the default for all form buttons.

Upvotes: 1

sevenseacat
sevenseacat

Reputation: 25029

I was looking to do the same thing today. I couldn't find a way to do it through the wrapper API, oddly, but by default Simple Form likes to wrap its inputs in a div.form-inputs and its submit button in a div.form-actions. So I styled the div.form-actions to @extend .col-md-offset-4 to get the result I wanted.

Hope this helps!

Upvotes: 1

Related Questions