Nested table formatting with simple_form, nested_form and twitter-bootstrap

Question

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| %>
  <fieldset>
    <%= f.input :email %>
    <%= f.input :name_first %>
    <%= f.input :name_last %>

            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Active</th>
                  <th>Company</th>
                  <th>Role</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                  <%= 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' %>
                    </td>
                  <% end %> 
              </tbody>
            </table>
               <p><%= f.link_to_add "Add a Role", :roles %></p>
        </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', users_path, :class => 'btn' %>
    </div>
  </fieldset>
<% 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.

Dan

Answer 1

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| %>
  <fieldset>
    <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>
    <div class="tubbable">...

Answer 2

If you want to use a table (as in your initial example) to do the layout, I've patched the nested_form gem here https://github.com/ritchiey/nested_form to allow that.

To specify that you want the new fields appended at the bottom of the tbody and wrapped in a tr, replace your current link_to_add call with:

<%= f.link_to_add "Add a Role", :roles, :container =>'tbody', :fields_element=>'tr'%>

Note: the :container param is a CSS selector.