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

StackOverflow https://stackoverflow.com/questions/9311120

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:

enter image description here

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

enter image description here

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/

Was it helpful?

Solution

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!

OTHER TIPS

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.

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.

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

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

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

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]

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top