How to use Bootstrap 3 input group in Simple Form

lolomet edited this page Feb 17, 2015 · 3 revisions

Simple Form now supports Bootstrap 3. :clap:, but still doesn't support some components in Bootstrap 3. This wiki tells you how to use Bootstrap 3 input-group in Simple Form. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 .

simple_form

Please go to https://gist.github.com/chunlea/11125126/ for more information.

# File here config/initializers/simple_form_bootstrap.rb
SimpleForm.setup do |config|
  config.wrappers :vertical_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'control-label'
 
    b.wrapper tag: 'div' do |ba|
      ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
 
  config.wrappers :horizontal_input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'col-sm-3 control-label'
 
    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.wrapper tag: 'div', class: 'input-group col-sm-12' do |append|
        append.use :input, class: 'form-control'
      end
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end
end
<div class="page-header clearfix">
  <div class="pull-left">
    <h1>Vertical Form<small></small></h1>
  </div>
  <div class="pull-right">
    <div class="btn-group">
      <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %>
      <%= link_to 'Show', @sales_group, class: "btn btn-default" %>
    </div>
  </div>
</div>
<!-- <%= render 'form' %> -->
 
<%= simple_form_for(@sales_group, wrapper: :vertical_input_group,
        wrapper_mappings: {
          check_boxes: :horizontal_radio_and_checkboxes,
          radio_buttons: :horizontal_radio_and_checkboxes,
          file: :horizontal_file_input,
          boolean: :horizontal_boolean
        }) do |f| %>
  <%= f.error_notification %>
 
  <div class="form-inputs">
    <%= f.input :name, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-addon">Prepend stuff</span>
      <%= f.input_field :name, class: "form-control" %>
      <span class="input-group-addon">Append stuff</span>
    <% end %>
    <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <span class="input-group-addon">
        <input type="radio">
      </span>
    <% end %>
    <%= f.input :state, wrapper: :vertical_input_group, hint: "Google" do %>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    <% end %>
    <hr>
  </div>
  
  <div class="form-actions col-sm-offset-3">
    <%= f.button :submit %>
  </div>
<% end %>
 
<div class="page-header clearfix">
  <div class="pull-left">
    <h1>Horizontal Form<small></small></h1>
  </div>
  <div class="pull-right">
    <div class="btn-group">
      <%= link_to 'Back', sales_groups_path, class: "btn btn-default" %>
      <%= link_to 'Show', @sales_group, class: "btn btn-default" %>
    </div>
  </div>
</div>
 
<%= simple_form_for(@sales_group, html: { class: 'form-horizontal' },
        wrapper: :horizontal_input_group,
        wrapper_mappings: {
          check_boxes: :horizontal_radio_and_checkboxes,
          radio_buttons: :horizontal_radio_and_checkboxes,
          file: :horizontal_file_input,
          boolean: :horizontal_boolean
        }) do |f| %>
  <%= f.error_notification %>
 
  <div class="form-inputs">
    <%= f.input :name, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-addon">Prepend stuff</span>
      <%= f.input_field :name, class: "form-control" %>
      <span class="input-group-addon">Append stuff</span>
    <% end %>
    <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <span class="input-group-addon">
        <input type="radio">
      </span>
    <% end %>
    <%= f.input :state, wrapper: :horizontal_input_group, hint: "Google" do %>
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <%= f.input_field :state, class: "form-control" %>
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    <% end %>
    <hr>
  </div>
  
  <div class="form-actions col-sm-offset-3">
    <%= f.button :submit %>
  </div>
<% end %>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.