想在表单旁边添加嵌套表单

Question

我有用于添加图像的嵌套表单，它工作正常。

当我添加新图片时，它会在之前的表格下方添加新表格。

但我想在以前的表格旁边添加新表格。

下nested_form_for

<div class="col-xs-4">
                            <%= f.fields_for :images do |image_form| %>
                              <%= image_form.collection_select :version_name, Image::VERSION_NAMES.keys.collect{|version_name| [version_name, version_name]}, :first, :last, :include_blank => "Please Select" %> <br /><br />
                                <div class="image-upload">
                                  <label for="file-input">
                                    <i class="fa fa-cloud-upload"></i>
                                  </label>
                                  <%= image_form.file_field :picture,:'data-role'=>"none" ,:onchange=>"readURL(this);" ,:id=>"file-input" %>
                                </div>
                              <%= image_tag image_form.object.picture.url,:class=>"img_prev", :style => "width:80px;height: 70px" %><br />
                              <%= image_form.link_to_remove "Remove this Pic" %><br />
                            <% end %>
                        </div>
                        <br /><br /><%= f.link_to_add "Add a picture", :images ,:id=>"add_pic"%>
                      </div>

您可以在图片中看到它位于预览图片下方，但我希望它位于上一张图片旁边。

如果有人有想法帮助我。谢谢。

Answer 1

要是能看到css就容易多了。但是，看起来您的 "image-upload" div 或它周围的表格是 window 的宽度，因此您的新表格出现在前一张图片下方，而不是并排放置。如果你减少这个 div 的宽度，它应该并排放置。

Answer 2

我使用这段代码实现了这个功能。

这对我有用

 <%= f.fields_for :images do |image_form| %>
                          <div class="col-xs-6">
                              <%= image_form.collection_select :version_name, Image::VERSION_NAMES.keys.collect{|version_name| [version_name, version_name]}, :first, :last, :include_blank => "Please Select" %> <br /><br />
                                <div class="image-upload">
                                  <label for="file-input">
                                    <i class="fa fa-cloud-upload"></i>
                                  </label>
                                  <%= image_form.file_field :picture,:'data-role'=>"none" ,:onchange=>"readURL(this);" ,:id=>"file-input" %>
                                </div>
                              <%= image_tag image_form.object.picture.url,:class=>"img_prev", :style => "width:80px;height: 70px; display:none;" %><br />
                              <%= image_form.link_to_remove "Remove this Pic" %><br />
                          </div>
                        <% end %>
                        <br /><br /><%= f.link_to_add "Add a picture", :images ,:id=>"add_pic"%>

想在表单旁边添加嵌套表单

want to add nested form beside the form

forms

jquery

ruby-on-rails

nested-forms