Simple_form class form-horizontal with bootstrap 3 not working in rails 4

Question

I have two rails apps, and the 'form-horizontal' is working in one, but not the other, and I have no idea why.

First app is called "Horizontal" (my test app) and the other is "Inventory"

Form in "horizontal" app:

<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %>
  <div class="field">
    <%= f.input :name %>
  </div>
  <div class="field">
    <%= f.input :number %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

and looks like this in the browser:

and the form for the "inventory" app is:

<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>
  <%= f.error_notification %>
  <div class="field">
    <%= f.input :part_number %>
  </div>
  <div class="field">
    <%= f.input :on_order_qty %>
    <%= f.input :revision %>
    <%= f.input :current_rev %>  
    <%= f.input :name, required: false%><br>
  </div>

  <%= f.simple_fields_for :parts do |part| %>
    <%= render 'part_fields', :f => part %>
  <% end %>
  <div class="links">
    <%= link_to_add_association 'Add additional supplier', f, :parts %><br><br>
  </div>
  <div class="fields">
    <%= f.input :stock_qty %>
    <%= f.input :ncmr_qty %>
  </div>
  <div class="form-actions">
    <%= f.submit %>
  </div>
<% end %>

but it looks like this in the browser:

Why won't the form-horizontal class work in the "Inventory" app?

It appears that the integer input fields are getting rendered horizontally, but something weird is happening in the text input fields. Here is the source html from the browser for the "Inventory" app:

<form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"
id="new_item" method="post"><div style="margin:0;padding:0;display:inline"><input
name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token"
type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk=" /></div>

<div class="field">
<div class="input string required item_part_number"><label class="string required"
for="item_part_number"><abbr title="required">*</abbr> Part number</label><input aria
required="true" class="string required" id="item_part_number" maxlength="255"
name="item[part_number]" required="required" size="255" type="text" /></div>
</div>
<div class="field">
<div class="input integer optional item_on_order_qty"><label class="integer optional"
for="item_on_order_qty">On order qty</label><input class="numeric integer optional"
id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number" /></div>
<div class="input string optional item_revision"><label class="string optional"
for="item_revision">Revision</label><input class="string optional" id="item_revision"
maxlength="255" name="item[revision]" size="255" type="text" /></div>
<div class="input boolean optional item_current_rev"><input name="item[current_rev]"
type="hidden" value="0" /><input class="boolean optional" id="item_current_rev"
name="item[current_rev]" type="checkbox" value="1" /><label class="boolean optional"
for="item_current_rev">Current rev</label></div>  
<div class="input string optional item_name"><label class="string optional"
for="item_name">Name</label><input class="string optional" id="item_name" maxlength="255"
name="item[name]" size="255" type="text" /></div><br>
</div>
( I took out the html for the nested fields and some other fields for brevity)
<div class="form-actions">
 <input name="commit" type="submit" value="Create Item" />
</div>
</form>

I've tested in both Chrome and Firefox. I've checked that the bootstrap-sass gem and simple_form gem are the same versions. I have no fancy customization css or javascript, just the @import 'bootstrap'; line in a bootstrap_custom.css.scss file in both apps. I don't know why the text input fields cover the whole width of the screen in the "Inventory" app, but the integer fields seem to be fine and rendering horizontally. What's wrong here?

Solution 1

I ran into a similar issue and found a pretty quick fix here http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form

The simple fix is (after doing the normal simple form bootstrap init stuff -see below), you add the following code to an initializer (like config/initializers/simple_form_bootstrap.rb)

inputs = %w[
  CollectionSelectInput
  DateTimeInput
  FileInput
  GroupedCollectionSelectInput
  NumericInput
  PasswordInput
  RangeInput
  StringInput
  TextInput
]

inputs.each do |input_type|
  superclass = "SimpleForm::Inputs::#{input_type}".constantize

  new_class = Class.new(superclass) do
    def input_html_classes
      super.push('form-control')
    end
  end

  Object.const_set(input_type, new_class)
end

and you are off to the races.

The "normal simple form bootstrap init stuff" goes something like:

rails generate simple_form:install --bootstrap

If you want horizontal forms, add this to your simple_form config

config.form_class = "simple_form form-horizontal"

CAVEAT: Based on some recent comments, it appears this many not work for more recent versions of simple_form. I wrote the post some time ago and the project that was using this code (for me) is no longer using simple_form so it's hard to track down the exact version number. I believe this will work for verisions 2.x. Once you get to v3 you may have issues and have to find a different solution.

Solution 2

To override on per form basis, change:

<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>

to

<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>

to change all forms to horizontal, change initializer:

config/initializers/simple_form_bootstrap.rb line:

config.default_wrapper = :vertical_form

to

config.default_wrapper = :horizontal_form

(remember to restart rails server after changing initializer)

to change just an individual input, change:

<%= f.input :on_order_qty %>

to

<%= f.input :on_order_qty, wrapper: :horizontal_form %>

Solution 3

Simple Form 3.1.0.rc1 has been released!! This supports bootstrap 3. Just update your gem to the latest version this will solve your problem. You can check the other enhancements through the change logs here https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md

Solution 4

Just update your simple_form to

gem 'simple_form', '3.1.0.rc2'

And then re-run

$ rails generate simple_form:install --bootstrap

Solution 5

I tried quite many different solutions but, nothing helped until I've added wrapper: :horizontal_form line to each form inputs. And, I have the latest simple_form version: 3.2.1

For example:

= f.input :payment_term, wrapper: :horizontal_form

Hint: https://gist.github.com/chunlea/11125126/

View more solutions

Comments

[andrewcockerham]

It looks like you are talking about manually using the bootstrap column widths to get the fields in a horizontal layout. Yes, this should work, but the whole point of my question is why is the simple_form form-horizontal class not doing this automatically for me like its supposed to?

[andrewcockerham]

using this version of Simple Form still doesn't work

[morgler]

Does not seem to work anymore with the current simple_form 3.1 and Bootstrap 3. The changes to simple_form.rb are already there in simple_form now. Although this suggests that it should work out of the box now, it sadly doesn't. And this solution does not seem to work anymore either.