htmlcssformscocoon-gem

Rails: Cocoon gem add and remove fields


I'm using the cocoon gem and I'm trying to horizontally inline three nested fields and a remove button. I have achieved that but as you can see from the image I have attached, the width of the input-group(three inputs and the remove button) does not extend 100% to the the width of the other fields. How can can I horizontally inline the three input fields, place the remove button to the right and extend everything to match the width of the other fields? I'm also open to other ideas on the arrangement of the three inputs and the remove button.

<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

Update 1

According to eikes answer I get this:

enter image description here


Solution

  • I assume you are using simple_form to generate the html, which generates a wrapper div around each input. You can affect this element by adding a wrapper_html option to your input call, for example:

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