Skip to content

Instantly share code, notes, and snippets.

@chunlea
Last active October 5, 2021 20:03

Revisions

  1. chunlea revised this gist Apr 20, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion input-group-in-simple-form.md
    Original file line number Diff line number Diff line change
    @@ -3,4 +3,6 @@ Finally, Simple Form support Boostrap 3. :clap:
    But I found it still dosen't support some components in Bootstrap 3. Or may be in the future.
    But I can't wait, so I find a solution to support them. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 .

    This is a final solution and I used in my project.
    This is a final solution and I used in my project.

    ![simple_form](https://cloud.githubusercontent.com/assets/1522415/2751454/c4491038-c8ce-11e3-825e-30525640e47b.png)
  2. chunlea renamed this gist Apr 20, 2014. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  3. chunlea created this gist Apr 20, 2014.
    6 changes: 6 additions & 0 deletions Readme.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    Finally, Simple Form support Boostrap 3. :clap:

    But I found it still dosen't support some components in Bootstrap 3. Or may be in the future.
    But I can't wait, so I find a solution to support them. It was inspired by https://github.com/plataformatec/simple_form/pull/531#issuecomment-5629150 .

    This is a final solution and I used in my project.
    30 changes: 30 additions & 0 deletions simple_form_bootstrap.rb
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    # 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
    121 changes: 121 additions & 0 deletions view.html.erb
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,121 @@
    <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_form,
    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_form,
    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 %>