Simple cocoon styling

‹ Back

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>