How to Format an Attachment Question

Anne Rosebery
Form Developers, Bundle Developers

An attachment field is made up of multiple parts, each with their own classes assigned to them to allow styling.

filefield

The field name is like all other field names. If you want to add a particular class to the question, that can be done with render attributes. However, the other parts of an attachment question include:

  • Upload button
  • File Table
  • Empty Message

These emlements are rendered in the order given above.

These leverage the following classes to allow styling via CSS:

  • fileinput-button
  • empty-message
  • file-table
  • file-header
  • file-row
  • file-container
  • file-filename
  • file-filesize
  • file-status
  • file-actions

The table is built like this example:

<ul class="file-table">
  <div class="file-header">
    <li class="file-row">
      <span>File Name</span>
      <span>File Size</span>
      <span>Status</span>
      <span>&nbsp;</span>
    </li>
  </div>
  <div class="file-container">
    <li class="file-row">
      <span class="file-filename">indexes4.JPG</span>
      <span class="file-filesize">54.60 KB</span>
      <span class="file-status">Uploaded</span>
      <span class="file-actions"><a href="#">Remove</a></span>
    </li>
  </div>
</ul>