Class Simple_form - horizontal with bootstrap 3 not working on rails 4

Question

I have two applications for rails, and "form-horizontal" works in one, but not in the other, and I have no idea why.

The first application is called "Horizontal" (my test application), and the other is "Inventory"

Form in the "horizontal" application:

<%= 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 it looks like this in a browser:

and the form for the inventory application:

 <%= 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 in the browser it looks like this:

Why is there no form-horizontal class in the Inventory application?

It looks like the complete input fields are horizontal, but something strange is happening in the text input fields. Here is the html source from the browser for the Inventory application:

 <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 tested in both Chrome and Firefox. I checked that the bootstrap-sass and simple_form gem are the same versions. I don't have an attractive CSS or javascript setting, just the @import 'bootstrap'; in the bootstrap_custom.css.scss file in both applications. I don’t know why the text input fields cover the entire screen width in the Inventory application, but the whole fields seem accurate and are displayed horizontally. What is wrong here?

Answer 1

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

A simple fix (after executing the usual bootstrap element of the bootstrap - see below), you add the following code to the initializer (for example, 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 go to the race.

The "usual simple loading of the initial boot form" looks something like this:

 rails generate simple_form:install --bootstrap 

If you want horizontal shapes, add this to the simple_form configuration

 config.form_class = "simple_form form-horizontal" 

CAVEAT: Based on some recent comments, it seems that many of them do not work for later versions of simple_form . I wrote a post a while ago, and the project that used this code (for me) no longer uses simple_form , so it's hard to find the exact version number. I believe this will work for versions 2.x. Once you get to v3, you may have problems and you should find another solution.

Answer 2

Simple form 3.1.0.rc1 has been released! This supports download 3. Just upgrade your stone to the latest version, this will solve your problem. You can check other improvements through the change logs here https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md

Answer 3

Just upgrade your simple_form to

 gem 'simple_form', '3.1.0.rc2' 

And run again

 $ rails generate simple_form:install --bootstrap 

Answer 4

I tried many different solutions, but nothing helped until I added a wrapper: :horizontal_form to each form input. And I have the latest version of simple_form: 3.2.1

For instance:

= f.input :payment_term, wrapper: :horizontal_form

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

Answer 5

To override based on each form, 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 the initializer:

config/initializers/simple_form_bootstrap.rb line:

config.default_wrapper = :vertical_form

to

config.default_wrapper = :horizontal_form

(do not forget to restart the rail server after changing the initializer)

to change only a single input, change:

<%= f.input :on_order_qty %>

to

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

Answer 6

Use the simple form RC1. There is a whole example project: https://github.com/rafaelfranca/simple_form-bootstrap . I just copied the bootstrap initializer and followed the Horirozontal example at https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples .

Answer 7

If all of the above does not work, try gem

gem 'simple_form_bootstrap3'

It is necessary to replace form_for with horizontal_form_for

Answer 8

Please see a very useful sample application for using Simple Form and Bootstrap toolkit in a Rails 4 application:

http://simple-form-bootstrap.plataformatec.com.br/

Do not forget the docs page .

Answer 9

I am having a problem with the full length of an input field spanning my entire page. Here is what I did, and I hope this helps someone else.
Using simple_form 3.4.0

Open configuration / initializers / simple_form_bootstrap.rb At the bottom of the page I changed the following: From

 config.default_wrapper = :vertical_form config.wrapper_mappings = { check_boxes: :vertical_radio_and_checkboxes, radio_buttons: :vertical_radio_and_checkboxes, file: :vertical_file_input, boolean: :vertical_boolean, datetime: :multi_select, date: :multi_select, time: :multi_select } end 

To:

  config.default_wrapper = :horizontal_form config.wrapper_mappings = { check_boxes: :horizontal_radio_and_checkboxes, radio_buttons: :horizontal_radio_and_checkboxes, file: :horizontal_file_input, boolean: :horizontal_boolean, datetime: :multi_select, date: :multi_select, time: :multi_select } end 

Then restart the application to reinitialize.

Answer 10

When I use form-horizontal in my code, I also change various inputs using bootstrap classes. For example, with download 3:

 <div class="form-group"> <%= f.label :name, class: "control-label col-sm-3" %> <div class="col-sm-4"><%= f.text_field :name, placeholder: "Your placeholder", class: "form-control" %></div> </div> 

And now you can configure col-sm to col-sm-12 if you want the entire width of your application. I think it’s easier to configure this method. (col-sm for bootstrap 3, if you need an older version, I think you need to use the old uppercase)

Further information on the bootsrap form here: doc

Here is an example code with bootstrap 2 and a simple form: doc

The output form with bootsrap 2 should look like this:

 <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputName">Name</label> <div class="controls"> <input type="text" id="Name" placeholder="Name"> </div> </div> </form> 

I think you need to set the div control group class and div control class.

Here is a document from the old syntax: doc

Hope this helps