Rails：Cocoon gem 添加和删除字段答案

【问题标题】：Rails: Cocoon gem add and remove fieldsRails：Cocoon gem 添加和删除字段
【发布时间】：2020-04-09 06:34:56
【问题描述】：

我正在使用cocoon gem，我正在尝试水平内联三个嵌套字段和一个删除按钮。我已经实现了这一点，但正如您从我所附的图像中看到的那样，input-group（三个输入和删除按钮）的宽度不会 100% 扩展到其他字段的宽度。如何水平内联三个输入字段，将删除按钮放在右侧并扩展所有内容以匹配其他字段的宽度？我也对三个输入和删除按钮的安排持开放态度。

<div class="nested-fields">
  <div class="input-group" style="width:100%;">
    <%= form.input :day, :as => :select, :collection => [["Monday", 1],["Tuesday", 2],["Wednesday", 3],["Thursday", 4],["Friday", 5],["Saturday", 6],["Sunday", 0]],
                   :include_blank => "Select a day", label: false, input_html: { class: "form-control" } %>

    <%= form.input :opens, as: :time, twelve_hour: true, minute_step: 15, ampm: true , label: false, input_html: { class: "form-control", style: "width:100%;" }  %>

    <%= form.input :closes, as: :time, twelve_hour: true, minute_step: 15, ampm: true , label: false, input_html: { class: "form-control", style: "width:100%;" }   %>

    <%= form.input :store_id, :as => :hidden, :input_html => { :value => @store.id } %>

    <div class="links">
      <%= link_to_remove_association "Remove", form, :class => "btn btn-light btn-m" %>
    </div>
  </div>
</div>

更新 1

根据 eikes 的回答，我得到了这个：

【问题讨论】：

我相信如果您发布生成的 html 并且不将此问题与 rails 或 cocoon 相关联，您可以获得更多帮助，因为它们是不相关的。都是关于 HTML 和 CSS 的。
你是对的@eikes，感谢您的提醒！！
您希望删除按钮向右对齐，还是希望所有字段一起填充整个宽度（扩展这些时间/小时字段看起来不太好恕我直言）
感谢@nathanvda 的回复。我希望所有字段一起在一行中填充整个宽度（100%），并且删除按钮在右侧对齐。就像我在我的问题上的第一张图片一样，只将其扩展到 100% 的宽度。如果您对此有其他想法，那就太好了。

标签： html css forms cocoon-gem

【解决方案1】：

我假设您正在使用 simple_form 生成 html，它会在每个输入周围生成一个包装器 div。您可以通过在 input 调用中添加 wrapper_html 选项来影响此元素，例如：

<div class="nested-fields">
  <div class="input-group">
    <%= form.input :day, 
                   as:            :select,
                   collection:    [["Monday", 1],["Tuesday", 2],["Wednesday", 3],["Thursday", 4],["Friday", 5],["Saturday", 6],["Sunday", 0]],
                   include_blank: "Select a day",
                   label:         false,
                   input_html:    { class: "form-control" },
                   wrapper_html:  { style: "width: 25%; display: inline;" } %>

    <%= form.input :opens,
                   as:           :time,
                   twelve_hour:  true,
                   minute_step:  15,
                   ampm:         true,
                   label:        false,
                   input_html:   { class: "form-control" },
                   wrapper_html: { style: "width: 25%; display: inline;" } %>

    <%= form.input :closes,
                   as:           :time,
                   twelve_hour:  true,
                   minute_step:  15,
                   ampm:         true,
                   label:        false,
                   input_html:   { class: "form-control" },
                   wrapper_html: { style: "width: 25%; display: inline;" } %>

    <%= form.input :store_id,
                   as:         :hidden,
                   input_html: { value: @store.id } %>

    <div class="links" style="width: 25%; display: inline;">
      <%= link_to_remove_association "Remove", form, class: "btn btn-light btn-m" style="width: 100%;" %>
    </div>
  </div>
</div>

【讨论】：

所以我应该在所有输入中添加：wrapper_html: { style: "width:100%;" }？
@eiked，我添加了包装器，但不幸的是它无法正常工作。我在我的问题中添加了一张图片，以便您查看问题所在。
它正在工作。每个 div 现在都是 100% 宽度。更改百分比以使其更小。
感谢@eikes 的回复。我希望所有字段一起在一行中填充整个表单宽度，并且删除按钮在右侧对齐。就像我在我的问题上的第一张图片一样，只是将宽度扩大到表格的 100%。我正在使用您建议的包装器获得其他内容，请查看我添加到问题中的图像。
好吧，我以为你知道如何自己编写一点 html 和 css。看来您遇到了麻烦，所以我更新了答案