Форматирование вложенной таблицы с помощью simple_form, nested_form и twitter-bootstrap

Обновление: я обновил это после того, как немного покопался и понял, что проблема может быть связана с twitter-bootstrap.

Вот грубая версия моей вложенной формы:

<%= 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' }. Мне просто нужны поля без разделителей-оболочек и т. Д., И я не могу понять это. Я думал, что :wrapper => false был билетом, но пока не повезло.

Дэн


twitter-bootstrap ruby-on-rails-3 nested-forms simple-form
person Dan Tappin    schedule 18.03.2012    source источник

Ответы (4)


arrow_upward
2
arrow_downward

В итоге я разобрался сам. Вы должны переместить стиль формы (form-horizontal) в div вокруг невложенных полей:

<%= 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">...
person Dan Tappin    schedule 25.03.2012
comment
Можете ли вы опубликовать свое полное окончательное решение, потому что у меня возникают проблемы с добавлением части nested_form в таблицу, и похоже, что вы начинаете работать. буду признателен. - person Jorge Najera T; 17.10.2012
comment
В итоге я отказался от этого представления - если я помню, div вокруг входных данных был окончательным решением. - person Dan Tappin; 20.10.2012

arrow_upward
2
arrow_downward

Если вы хотите использовать таблицу (как в вашем первоначальном примере) для создания макета, я исправил гем nested_form здесь https://github.com/ritchiey/nested_form, чтобы разрешить это.

Чтобы указать, что вы хотите, чтобы новые поля добавлялись внизу tbody и заключались в tr, замените текущий вызов link_to_add на:

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

Примечание: параметр :container — это селектор CSS.

person Ritchie    schedule 30.03.2012

arrow_upward
0
arrow_downward

Не уверен, что это то, что вы хотите, но если вы хотите удалить оболочку div из поля ввода, используйте f.input_field вместо f.input:

= f.input_field :email, label: false, placeholder: 'email'
person kakubei    schedule 03.09.2013

arrow_upward
0
arrow_downward

Добавьте :wrapper => false к вызову simple_nested_form_for. Проблема в том, что :wrapper => false в simple_fields_for перезаписывается значением по умолчанию :wrapper => nil в конфигурации simple_form_for.

См. эту ссылку для настройки: Практическое руководство. Визуализация вложенных полей внутри таблицы

person urandom    schedule 25.02.2013