Introduction
Layout
Navigation
Rails
CSS classes and helpers
Typography
Forms
UI Components
SASS Mixins
JS
Developer resources
Warning: You are currently browsing without javascript enabled.
Here is a quick way to markup your cocoon fields in rails to make them look a bit nicer by default.
<div class='nested-fields control-group select'> <div class="control-group--label"> <label class="control-label">My Nested Field</label> </div> <div class="controls cocoon-field form--medium"> <div class="cocoon-field--field"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="cocoon-field--remove"> <button>Remove field</button> </div> </div> </div>
<div class='nested-fields control-group select'> <%= f.label :my_nested_field %> <%= f.hint :my_nested_field -%> <%= f.error :my_nested_field -%> <div class="controls cocoon-field form--medium"> <div class="cocoon-field--field"> <%= f.input_field :my_nested_field, collection: data_source, label_method: :title, value_method: :id, include_blank: true %> </div> <div class="cocoon-field--remove"> <%= link_to_remove_association "Remove", f %> </div> </div> </div>
And to space out your cocoon fields, simply update your wrapper to add the inputs field, and add a button class to your add button:
<div class='my_nested_fields inputs'> <div class='nested-fields control-group select'> <div class="control-group--label"> <label class="control-label">My Nested Field</label> </div> <div class="controls cocoon-field form--medium"> <div class="cocoon-field--field"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="cocoon-field--remove"> <button>Remove field</button> </div> </div> </div> <div class='nested-fields control-group select'> <div class="control-group--label"> <label class="control-label">My Nested Field</label> </div> <div class="controls cocoon-field form--medium"> <div class="cocoon-field--field"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="cocoon-field--remove"> <button>Remove field</button> </div> </div> </div> <div class='nested-fields control-group select'> <div class="control-group--label"> <label class="control-label">My Nested Field</label> </div> <div class="controls cocoon-field form--medium"> <div class="cocoon-field--field"> <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="cocoon-field--remove"> <button>Remove field</button> </div> </div> </div> <div> <button class="button">Add</button> </div> </div>
<div class='my_nested_fields inputs'> <%= f.simple_fields_for :my_nested_fields do |nested_field| -%> <%= render 'my_nested_fields', f: nested_field| -%> <%- end -%> <div> <%= link_to_add_association 'Add', f, :my_nested_fields, class: "button" -%> </div> </div>