Nested table formatting with simple_form, nested_form and twitter-bootstrap

Question

Update: I updated this after doing some operations and realized that it could be a twitter-bootstrap problem 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 rendering, the fields in the rows of the indented table are similar to the parent forms using { :class => 'form-horizontal' } . I just want fields without div separators, etc. And, it seems, they could not understand. I thought :wrapper => false was a ticket, but so far no luck.

Dan

Answer 1

I ended up understanding this myself. You should move the form style (form-horizontal) in the div only around 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 original example) to create the layout, I fixed the nested_form stone here https://github.com/ritchiey/nested_form to allow this.

To indicate that you want to add new fields at the bottom of the body and wrap them in tr, replace the current link_to_add call with

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

Note. Parameter: container is a CSS selector.

Answer 3

Add :wrapper => false to the simple_nested_form_for call. The problem is that: wrapper => false in simple_fields_for gets the default rewrite: wrapper => nil in the simple_form_for configuration.

See this link for customization: How To: render nested fields inside a table

Answer 4

Not sure if this is what you want, but if you want to remove the div wrapper from the input field, use f.input_field instead of f.input :

 = f.input_field :email, label: false, placeholder: 'email'