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

【问题标题】：want to add nested form beside the form想在表单旁边添加嵌套表单
【发布时间】：2016-02-29 12:42:02
【问题描述】：

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

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

但我想在之前的表单旁边添加新表单。

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>

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

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

【问题讨论】：

标签： jquery ruby-on-rails forms nested-forms

【解决方案1】：

如果我们能看到 css 会更容易。但是，它看起来像您的“图像上传” div 或它周围的表单是窗口的宽度，因此您的新表单出现在前一个图像下方而不是并排放置。如果你减小这个 div 的宽度，它应该并排放置。

【讨论】：

【解决方案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"%>

【讨论】：