Twitter-bootstrap – Nested table formatting with simple_form, nested_form and twitter-bootstrap


Update: I updated this after doing some digging and realizing that this might be twitter-bootstrap causing the problem.

Here is a rough version of my nested form:

<%= simple_nested_form_for @user, :html => { :class => 'form-horizontal' } do |f| %>
    <%= f.input :email %>
    <%= f.input :name_first %>
    <%= f.input :name_last %>

            <table class="table table-striped">
                  <%= f.simple_fields_for :roles, :wrapper_tag => :tr do |role_form| %>
                    <td><%= role_form.hidden_field :id %><%= role_form.input :active, :label => false, :wrapper => false %></td>
                    <td><%= role_form.association :company, :label => false, :wrapper => false %></td>
                    <td><%= role_form.input :role, :label => false, :collection => [ "Guest", "User", "Inspector", "Owner"], :wrapper => false %></td>
                    <td><%= role_form.link_to_remove "Delete", :class => 'btn btn-mini btn-danger' %>
                  <% end %> 
               <p><%= f.link_to_add "Add a Role", :roles %></p>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', users_path, :class => 'btn' %>
<% end %>

When it's rendered the fields in the table rows are indented the same as the parent form via the { :class => 'form-horizontal' }. I just want the fields with no wrapper divs etc. and can't seem to figure it out. I thought the :wrapper => false was the ticket but no luck so far.


Best Solution

I ended up figuring it out on my own. You have to move the form style (form-horizontal) into a div just around the non-nested fields:

<%= simple_nested_form_for @user do |f| %>
    <div class="form-horizontal">
    <%= f.input :email %>
    <%= f.input :name_first %>
    <%= f.input :name_last %>
    <%= f.input :phone %>
    <%= f.input :mobile %>

    <%= f.input :password %>
    <%= f.input :password_confirmation %>
    <div class="tubbable">...