HTML Code Inside Buttons with Simple_Form

HTML code inside buttons with simple_form

Don't use content_tag. The following works:

  <%= button_tag(type: 'submit', class: "btn btn-primary") do %>
    <i class="icon-ok icon-white"></i> Save
  <% end %>

Adding an icon to simple_form submit button in Rails

Perhaps like this:

<div class="small-3 columns">
  <%= button_tag type: 'submit', class: "button postfix" do %>
      <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
  <% end %>
</div>

Simple form wrap html and methods around radio buttons

Answer provided by Kh Ammad in the comment, the resulting code gives the equivalent post values, and achieves the result. Many thanks!

<table width="100%"> 
  <% Application.application.active_admin_subscription_levels.each do |level| %> 
    <tr>
      <td width="20%">
         <%= f.radio_button(:subscription_level_id, level.id) %> <%= level.name %>
      </td> 
      <td>
        <%= level.description %>
      </td> 
    </tr> 
  <% end %> 
</table>

Rails Simple form button id

= f.button :submit, id: "whatever"

If you look at the documentation, it accepts an optional string and an options hash (for class or id). Internally, it simply calls the submit_tag helper and that's why it's different from the input helper where you pass any HTML attributes in the input_html hash.

How to position submit button on same line as input with Simple Form and Bootstrap?

To solve this, I needed to use input_field inside an input block, and use the inline-form style on the wrapper for the block:

<%= f.input :rollout_id, :label => false, wrapper_html: {class: "form-inline"} do %>
  <%= f.input_field :rollout_id, collection: @rollout_options, :label => false %>
  <%= f.button :submit, "Apply", :class => "btn-primary" %>
<% end %>

Hope this helps someone.

simple_form collection wrapper (radios buttons) : double encapsulation of items

Summary:

I had done something similar to this before by creating a custom input that inherits from SimpleForm::Inputs::CollectionRadioButtonsInput and overloading just a few methods. For more on custom input components, see https://github.com/plataformatec/simple_form/wiki/Adding-custom-input-components.

In any case, the code below produces your desired html markup almost exactly using simple_form v2.1.0 and rails v3.2.15.

Code:

# File: app/inputs/semantic_ui_radio_buttons_input.rb

class SemanticUiRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput

  # Creates a radio button set for use with Semantic UI

  def input
    label_method, value_method = detect_collection_methods
    iopts = { 
      :checked => 1,
      :item_wrapper_tag => 'div',
      :item_wrapper_class => 'field',
      :collection_wrapper_tag => 'div',
      :collection_wrapper_class => 'grouped inline fields'
     }
    return @builder.send(
      "collection_radio_buttons",
      attribute_name,
      collection,
      value_method,
      label_method,
      iopts,
      input_html_options,
      &collection_block_for_nested_boolean_style
    )
  end # method

  protected

  def build_nested_boolean_style_item_tag(collection_builder)
    tag = String.new
    tag << '<div class="ui radio checkbox">'.html_safe
    tag << collection_builder.radio_button + collection_builder.label
    tag << '</div>'.html_safe
    return tag.html_safe
  end # method

end # class

Then, in your form, just do:

-# File: app/views/<resource>/_form.html.haml

-# Define the collection
- child_care_coll = %w( Infant Toddler Preschool Kindergarten ).map!.with_index(1).to_a

-# Render the radio inputs
= f.input :child_care_type,
  :collection    => child_care_coll,
  :label_method  => :first,
  :value_method  => :last,
  :as            => :semantic_ui_radio_buttons

Results:

<div class="input semantic_ui_radio_buttons optional childcare_child_care_type">

  <label class="semantic_ui_radio_buttons optional control-label">
    Child care type
  </label>

  <div class="grouped inline fields">

    <div class="field">
      <div class="ui radio checkbox">
        <input checked="checked" class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_1" name="childcare[child_care_type]" type="radio" value="1">
        <label for="childcare_child_care_type_1">Infant</label>
      </div>
    </div>

    ...

    <div class="field">
      <div class="ui radio checkbox">
        <input class="semantic_ui_radio_buttons optional" id="childcare_child_care_type_4" name="childcare[child_care_type]" type="radio" value="4">
        <label for="childcare_child_care_type_4">Kindergarten</label>
      </div>
    </div>

  </div>

</div>

---

Related Topics