I am trying to implement nested form in rails with the help of nested_form gem. I want the nested fields to be displayed in tabular format. Can any one help me out?
Following is my view file:
<%= nested_form_for @invoice,url: invoices_path,method: :post do |f| %>
<div class="row form-inline">
<div class="col-lg-12">
<ul id="sortable" class="append-table">
<li class="table-responsive has-dropdown invoice-append">
<div class="table items">
<div class="table-head">
<div class="th"></div>
<div class="th">#</div>
<div class="th">Name</div>
<div class="th">Description</div>
<div class="th">Quantity</div>
<div class="th">Item Price</div>
<div class="th">Total Price</div>
<div class="th">Taxable</div>
<div class="th"></div>
<div class="th"></div>
</div>
<div class="table-body ui-sortable">
<%= f.fields_for :invoice_line_items do |ff| %>
<div class="tr item">
<div class="td handle-cell">
<div class="handle ui-sortable-handle"></div>
</div>
<div class="td display-order-cell">
<div>
<div class="display-order">1</div>
</div>
</div>
<div class="td">
<div class="form-group name-container">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="form-control typeahead name prevent-enter tt-hint" maxlength="200" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">
<%#= ff.text_field :name, class: "form-control typeahead name prevent-enter tt-input", placeholder: "Name",style: "position: relative; vertical-align: top; background-color: transparent;" %>
<input type="text" name="item0[name]" id="name" value="A" placeholder="Name" class="form-control typeahead name prevent-enter tt-input" maxlength="200" autocomplete="off" spellcheck="false" style="position: relative; vertical-align: top; background-color: transparent;" dir="auto">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: azo-sans-web, Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div class="tt-dataset-invoiceItemTemplatesAutocomplete"></div>
</span>
</span>
</div>
</div>
<div class="td">
<div class="form-group description-container">
<%= ff.text_area :description, class: "form-control", placeholder: "Description" %>
<!-- <textarea name="item0[description]" id="description" placeholder="Description" class="form-control description" maxlength="1000" style="overflow: hidden; word-wrap: break-word; resize: none; height: 60px;"></textarea> -->
</div>
</div>
<div class="td quantity-cell">
<div class="form-group">
<%= ff.text_field :quantity, class: "form-control", placeholder: "Qty" %>
<!-- <input type="text" name="item0[quantity]" id="quantity" value="5" placeholder="Qty" class="form-control quantity prevent-enter" size="5" maxlength="10"> -->
</div>
</div>
<div class="td original-price-cell">
<div class="input-group">
<div class="input-group-addon">₹</div>
<%= ff.text_field :price,class: "form-control", placeholder: "Item Price"%>
<!-- <input type="text" name="item0[original_price]" id="original_price" placeholder="Item Price" class="form-control original-price money-only prevent-enter" size="9" maxlength="9"> -->
</div>
</div>
<div class="td price-cell">
<label class="price-display"></label>
<%= ff.hidden_field :total_price,class: "form-control price money-only" %>
<!-- <input type="hidden" name="item0[price]" id="price" placeholder="Price" class="form-control price money-only" size="9" maxlength="9"> -->
</div>
<div class="td is-taxable-cell">
<div class="checkbox">
<%= ff.check_box :is_taxable %>
<label class="optional" for="remember"></label>
</div>
</div>
<div class="td remove-cell">
</div>
<div class="td save-invoice-item-template-cell">
<a href="#" class="js-save-as-invoice-item-template">Save to Use Again</a>
</div>
</div>
<% end %>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p><%= f.link_to_add "Add Item", :invoice_line_items, class: "btn btn-default" %></p>
<!-- <button type="button" class="btn btn-default add-item">Add Item</button> -->
</div>
</div>
<% end %>
This structure adds the nested fields outside the table structure. How to add it within <div class="table-body">?
