Twitter-Bootstrap: Simple_form not making horizontal form or correct HTML output?

Question

I don't know why Its not duplicating like the example. When I put the following code to have this form:

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :class => "form-horizontal" } ) do |f| %>
<%= f.input :user_name, :input_html => { :class => "span3" }, :hint => "just letters and numbers please." %>
<% end %>

Right now it looks like this:

When I want it to be like this (the first example here: http://simple-form-bootstrap.plataformatec.com.br/articles/new).

The Problem lies in the HTML being generated. My HTML is:

<div class="input string optional">
 <label for="user_user_name" class="string optional"> User name</label>
  <input type="text" size="50" name="user[user_name]" maxlength="25" id="user_user_name" class="string optional span3">
   <span class="hint">no spaces or special characters, just letters and numbers please</span>
</div>

And Simple_forms HTML:

<div class="control-group string required">
 <label for="article_name" class="string required">
  <abbr title="required">*</abbr> Name
 </label>
  <div class="controls">
   <input type="text" size="50" name="article[name]" id="article_name" class="string required span6">
    <p class="help-block">add your article title here</p>
  </div>
</div>

Totally different. I'm thinking the Bootstrap generator doesn't generate? What do you think? What should I do?

resources

https://github.com/plataformatec/simple_form

https://github.com/rafaelfranca/simple_form-bootstrap

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

Stare

Answer 1

Have you added the initializer for simple_form? this initializer sets the wrappers that should be used to output the bootstrap html

rails generate simple_form:install --bootstrap

Note that this only works with simple_form 2!

Fairground

Yeah I did rails generate simple_form:install --bootstrap as the installation said. This gave me 3 files: config/initializers/simple_form.rb and create config/locales/simple_form.en.yml create lib/templates/erb/scaffold/_form.html.erb – Stare

Damn, I see now. The bundle install goes to 1.5.2, so I have to manually use gem "simple_form", "~> 2.0.0.rc". I didn't see at the very beginning that is said "These Instructions are for 2.0...". It was kind of hard to see if you just go straight to the Bootstrap section. Thank you ahmeij. – Stare

from the simple_form github page the correct command is rails generate simple_form:install --bootstrap – Marinara

Updated the post adding the --bootstrap as per @Marinara – Fairground

For rails 4, it needs 3.0.0.rc – Faller

Answer 2

The output of

rails g simple_form:install --bootstrap

gives further instructions:

Inside your views, use the 'simple_form_for' with one of the Bootstrap form
classes, '.form-horizontal', '.form-inline', '.form-search' or
'.form-vertical', as the following:

  = simple_form_for(@user, :html => {:class => 'form-horizontal' }) do |form|

So you must add the :html => {:class => 'form-horizontal' } option to each _form.html file you want to change the form style. You can use 'form-search', 'form-inline', 'form-horizontal', or 'form-vertical' (the default).

To set the default form to horizontal, edit

lib/templates/erb/scaffold/_form.html.erb

and change the first line to this (using your preferred form class name):

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

For those using HAML, the file path and format will be different.

Arciniega

Answer 3

Is your form css set to "form-horizontal" in outputted HTML?

If not, I think you have to wrap the setting of :html :class in simple_form_for tag like this:

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), {:html => { :class => "form-horizontal" }} ) do |f| %>

Hope it helps.

Braithwaite

Answer 4

Not sure why you marked @ahmeij's answer as correct.

The correct solution is in your comment - you need to make sure you're using simple_form version 2 and not version 1. Like so:

gem "simple_form", "~> 2.0.0.rc"

or you can do it how sample simple_form bootstrap app on github does it:

gem 'simple_form', git: 'git://github.com/plataformatec/simple_form.git

And incase you didn't run the install the correct command is

rails generate simple_form:install --bootstrap

Marinara

Answer 5

If you're looking to do this with simple_form v3 rc1 then you can follow the steps I lay out here in my blog. I just researched all of this and implemented it:

http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form

Pinup

Thank you, thank you, thank you!! I've been pulling the hair out of my almost bald head all afternoon! Now I need to go back and try to understand why this worked. BTW; I am using simple_form 3.0.1 and I had to add the last part that you hoped would be fixed when they came out of RC. – Dinky

Answer 6

copy config\initializers\simple_form.rb to your app,everything will be ok

Deflower

Answer 7

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/][1]

Honewort

Answer 8

For simple_form ('~> 3.5') and bootstrap 4, do the follwing change in simple_form_bootstrap.rb initializer:

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|

to

config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|

To change all forms to horizontal, do the following change:

config.default_wrapper = :vertical_form

to

config.default_wrapper = :horizontal_form

And to change just one form do this:

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

Also you may need to replace all occurrences of control-label with form-control-label in initializer to vertically align the labels. Source

Nataline