Adding Twitter Bootstrap Upload Style to Rails Form Helpers

Question

After reading the answer in which I suggested using Simple_form gem with bootstrap integration, I installed it and created my form according to the simple_form instructions, but the input fields are floating to the right.

This is the layout. The form is called with partial "shared / reg"

<div class="container"> <div class="row"> <div class="span8"><%= yield %></div> <div class="span4"> <%= render 'shared/reg' %> </div> </div> </div> 

This is my simple form form.

 <%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %> <%= f.input :name %> <%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %> <%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %> <%= f.input :email %> <%= f.input :image, :as => :file %> <%= f.input :password %> <%= f.input :password_confirmation %> <%= f.button :submit %> <% end %> 

Below you can see how the input fields float to the right relative to the submit button.

Update

Answer 1

You should try the following:

 <%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %> <fieldset> <legend>User Registration</legend> <div class="control-group"> <%= f.label :name, class: "control-label" %> <div class="controls"> <%= f.text_field :name %></p> </div> </div> <div class="form-actions"> <%= f.submit %> </div> </fieldset> 

Please note that bootstrap uses some special selector elements for some classes / html elements, so if you forget to add an element or class, everything else will be messed up ... There is no way in this aspect.

On a side note, you should definitely try simple_form and bootstrap integration. It will make your life easier.

Update:

 <%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %> <fieldset> <legend>User Registration</legend> <%= f.input :name %> <%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %> <%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %> <%= f.input :email %> <%= f.input :image, :as => :file %> <%= f.input :password %> <%= f.input :password_confirmation %> <div class="form-actions"> <%= f.submit %> </div> </fieldset> <% end %> 

Answer 2

Instead of using the .form-actions class, which wraps the submit button in a gray block (which might not work for your page design), you can also wrap the button in the control group as follows:

  <div class="control-group"> <div class="controls"> <%= f.button :submit %> </div> </div> 

This is really only necessary if you use the .form-horizontal class in the form itself.

If you are looking for a replacement replacement creator that prints out bootstrap style markup for Rails, you can check out the gem I put together to handle these things:

https://github.com/potenza/bootstrap_form

Here you can customize the horizontal style form with the correct layout of the submit button:

 <%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }) do |f| %> <%= f.text_field :email %> <%= f.password_field :password %> <%= f.password_field :password_confirmation, label: 'Confirm Password' %> <%= f.control_group do %> <%= f.primary "Save User" %> <% end %> <% end %> 

This is an example output:

 <form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post"> <div class="control-group"> <label class="control-label" for="user_email">Email</label> <div class="controls"> <input id="user_email" name="user[email]" size="30" type="text" /> </div> </div> <div class="control-group"> <label class="control-label" for="user_password">Password</label> <div class="controls"> <input id="user_password" name="user[password]" size="30" type="password" /> </div> </div> <div class="control-group"> <label class="control-label" for="user_password_confirmation">Confirm Password</label> <div class="controls"> <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> </div> </div> <div class="control-group"> <div class="controls"> <input class="btn btn-primary" name="commit" type="submit" value="Save User" /> </div> </div> </form>