Skip to content

Instantly share code, notes, and snippets.

@chunlea
Last active October 5, 2021 20:03
Show Gist options
  • Save chunlea/11125126 to your computer and use it in GitHub Desktop.
Save chunlea/11125126 to your computer and use it in GitHub Desktop.
How to use Boostrap 3 input-group in Simple Form

Finally, Simple Form support Boostrap 3. 👏

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 heartcombo/simple_form#531 (comment) .

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

simple_form

# 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_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 %>
@captainpete
Copy link

captainpete commented Feb 23, 2017

🍸 🐢

Thanks!

@stijnwesterhof
Copy link

I'm getting the error: Couldn't find wrapper with name vertical_input_group any idea how this is possible?

@Extrapolator214
Copy link

@stijnwesterhof you need to restart rails, initializer doesn't reload automatically.

@chunlea thanks a lot for the solution, works perfectly (checked on Rails 5)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment