Rails: Cocoon gem добавляет и удаляет поля - PullRequest
Новая
       22

Rails: Cocoon gem добавляет и удаляет поля

2 голосов
/ 09 апреля 2020

Я использую камень кокона , и я пытаюсь расположить горизонтально три вложенных поля и кнопку удаления. Я добился этого, но, как вы можете видеть из изображения, которое я прикрепил, ширина 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>

enter image description here

Обновление 1

Согласно ответу Эйкса я получаю это:

enter image description here

1 Ответ

3 голосов
/ 09 апреля 2020

Я предполагаю, что вы используете simple_form для генерации html, которая генерирует оболочку div вокруг каждого ввода. Вы можете повлиять на этот элемент, добавив опцию wrapper_html к вашему вызову input, например: 

<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>
...