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/

Solution 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!

Solution 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.

Solution 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.

Solution 4

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

Solution 5

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

View more solutions

Comments

[LearningRoR]

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

[LearningRoR]

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.

[Dty]

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

[knutsel]

Updated the post adding the --bootstrap as per @Dty

[fotanus]

For rails 4, it needs 3.0.0.rc

[SteveO7]

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.