使用simple_form，nested_form和twitter-bootstrap的嵌套表格式 [英] Nested table formatting with simple_form, nested_form and twitter-bootstrap

问题描述

更新: 在进行一些挖掘并意识到这可能是导致问题的twitter-bootstrap之后，我对其进行了更新.

这是我的嵌套表单的粗略版本:

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 %>

渲染后，通过{ :class => 'form-horizontal' }将表行中的字段与父表单缩进.我只想要没有包装div等的字段，并且似乎无法弄清楚.我以为:wrapper => false是票，但到目前为止还算不上运气.

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.

丹

推荐答案

我最终自行解决了这个问题.您必须将表单样式(水平表单)移动到非嵌套字段周围的div中:

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">...

这篇关于使用simple_form，nested_form和twitter-bootstrap的嵌套表格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！