Rails: Cocoon gem add and remove fields

Question

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>

Update 1

According to eikes answer I get this:

I believe you could get more help if you posted the generated html and not tie this question to rails or cocoon, as they are unrelated. It's all about HTML and CSS. — eikes, Apr 09 '20 at 08:49
Do you want the remove button to align to the right, or do you want all fields together to fill the entire width (expanding those time/hour fields does not look good imho) — nathanvda, Apr 09 '20 at 14:05
Thanks for the reply @nathanvda. I want all the fields together to fill the entire width(100%) in one line and the remove button to be aligned at the right side. Just as in the first image I have on my question, only expanding it to 100% of width. If you have another idea for this that would be great too. — Dev, Apr 09 '20 at 14:44

eikes · Accepted Answer · 2020-04-14T08:17:04.157

3

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>

edited Apr 14 '20 at 08:17

answered Apr 09 '20 at 08:55

eikes

4,811
2
31
31

So I should add this: `wrapper_html: { style: "width:100%;" }` to all of the inputs? – Dev Apr 09 '20 at 09:05
@eiked, I added the wrapper but unfortunately its not working correctly. I aded an image to my question so you can see what's wrong. – Dev Apr 09 '20 at 09:14
It is working. Each div is now 100% width. Change the percentage to make it smaller. – eikes Apr 09 '20 at 13:14
Thanks for the reply @eikes. I want all the fields together to fill the entire form width in one line and the remove button to be aligned at the right side. Just as in the first image I have on my question, only expanding the width to 100% of the form. I'm getting something else with the wrapper you're suggesting, check out the image I have added to my question. – Dev Apr 12 '20 at 08:20
ok, I thought you knew how to write a little html and css yourself. It seems like you are having trouble with that, so I updated my answer – eikes Apr 13 '20 at 15:51
Thanks for the reply eikes! For some odd reason your code is not working properly. I have attached an image to my question. I want to 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. – Dev Apr 14 '20 at 05:55
I see. I added some more " display: inline;" css styles to the wrappers, which should fix it. – eikes Apr 14 '20 at 08:17

Rails: Cocoon gem add and remove fields

1 Answers1