search

nathanvda / cocoon

Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms
http://github.com/nathanvda/cocoon
MIT License
3.08k stars 382 forks source link

link_to_remove_association breaks when floated #628

Closed nafster closed 1 year ago

nafster commented 1 year ago

Hi! I've been using cocoon on many projects for several years and I love it!

I have a project working fine. link_to_remove_association and link_to_add_association work as expected, and all of the server side stuff works.

I would like to have the link_to_remove_association appear next to the field label. I have tried:

  1. adding the bootstrap float-left class using render_options;
  2. passing in a style='float:left' block using the same;
  3. adding css to the application.css like .remove_fields {float: left !important;};
  4. adding a float-left class to the generated HTML (using Inspect).

All of these methods make the link_to_remove_association appear as I want it, but also make the link stop working. Clicking on it does nothing, and shows nothing in the console.

Thanks!

Screen Shot 2023-01-15 at 10 41 23 AM

EDIT: I found a workaround by wrapping .nested-fields with a .nested-fields-wrapper, and putting the link_to_remove_association and .nested-fields within that wrapper and changing the wrapper_class option. That seems to work ok.

Still curious if you have any idea why the previous way I described would make it stop working.

nathanvda commented 1 year ago

Great that you found it!

I guess your solution kind of explains why it didn't work? The link_to_remove_association searches for the nearest/closest surrounding wrapper_class (default nested-fields) and will remove it. However, probably, because of the float, the link was outside the nested-fields block, and so it was no longer found?