Answers.Body: <p>The case custom fields are formatted as a series of one row tables.  You could add some jQuery to move them around.</p>
  
  <p>For example:</p>
  
  <pre><code>CRM.$(function($) {
    $('#Outcomes table:nth-of-type(3n+1)').each(function (index) {
      // Combine 3 rows into 1      
      for (var i = 0; i &lt;= 1; i++) {
        $(this).find('td:last').after($(this).next().find('td'));
        $(this).next().remove();
      }
      // Merge tables
      if (index &gt; 0) {
        $(this).prev().find('tr:last').after($(this).find('tr'));
        $(this).remove();
      }
    });
    // Remove labels if not wanted
    $('#Outcomes td.label').remove();
  });
  </code></pre>
  
  <p>You can add it to your page in various ways, but I'd create a tiny extension and drop it in there.  See also <a href="https://wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference" rel="nofollow noreferrer">wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference</a> </p>
  
  <p>Without jQuery: </p>
  
  <p><a href="https://i.sstatic.net/wlULB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wlULB.png" alt="enter image description here"></a></p>
  
  <p>With jQuery: </p>
  
  <p><a href="https://i.sstatic.net/JlHpw.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/JlHpw.png" alt="enter image description here"></a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-05T23:26:44.910Z
Answers.LastActivityDate: 2016-12-06T16:05:21.883Z
Answers.LastEditDate: 2016-12-06T16:05:21.883Z
Answers.UserDisplayName: Aidan
Body: <p>I have a high number of 'outcomes' for a client in the format of 3 fields for each outcome as below:</p>
  
  <p>'outcome words',  date identified,    date met</p>
  
  <p>Problem is that custom fields are formatted as one below the other as:</p>
  
  <ul>
  <li>'outcome words' </li>
  <li>date identified</li>
  <li>date met</li>
  </ul>
  
  <p>Which means that the screen will be very deep causing the user to scroll down a lot.  What would be involved in re-formatting the screen so that these fields are all side by side? </p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-28T12:07:01.363Z
Comments.Text: Does the multi-record, 'Tab with table' work for this problem?
Comments.UserDisplayName: Aidan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-28T15:50:53.000Z
Comments.Text: These custom fields are 'per case' so unfortunately this idea won't work as only custom fields for contacts can be mult-record.  But nice idea!
Comments.UserDisplayName: Andy Clark
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-28T21:00:38.630Z
Comments.Text: Which CMS? If Drupal have you considered webform-civicrm? Webform Layout, or 'grid' could help
Comments.UserDisplayName: petednz - fuzion
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-28T21:03:16.153Z
Comments.Text: It's Drupal. Thanks, I will look at webform and see if that will work - but these custom field sets are for a case so hard to see how a webform will help.
Comments.UserDisplayName: Andy Clark
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-28T21:09:35.967Z
Comments.Text: The case custom fields are formatted as a series of one row tables. You could add some jquery to move them around
Comments.UserDisplayName: Aidan
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-05T15:15:43.793Z
Comments.Text: @Aidan that comment would make a good answer.
Comments.UserDisplayName: Coleman
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-05T23:31:53.260Z
Comments.Text: @Coleman - thanks for the nudge.  See below
Comments.UserDisplayName: Aidan
Tags: <custom-fields><civicase><4.7><jquery>
Title: How can arrange custom fields so they are side by side?
ThreadText: # How can arrange custom fields so they are side by side?
  
  (Asked by: username_0 on 2016-11-28)
  
  I have a high number of 'outcomes' for a client in the format of 3 fields for each outcome as below:
  
  'outcome words', date identified, date met
  
  Problem is that custom fields are formatted as one below the other as:
  
  * 'outcome words'
  * date identified
  * date met
  
  Which means that the screen will be very deep causing the user to scroll down a lot. What would be involved in re-formatting the screen so that these fields are all side by side?
  
  **Tags:** custom-fields, civicase, 4.7, jquery
  
  > **Comments:**
  > **username_1**: Does the multi-record, 'Tab with table' work for this problem?  
  > **username_0**: These custom fields are 'per case' so unfortunately this idea won't work as only custom fields for contacts can be mult-record.  But nice idea!  
  > **username_2**: Which CMS? If Drupal have you considered webform-civicrm? Webform Layout, or 'grid' could help  
  > **username_0**: It's Drupal. Thanks, I will look at webform and see if that will work - but these custom field sets are for a case so hard to see how a webform will help.  
  > **username_1**: The case custom fields are formatted as a series of one row tables. You could add some jquery to move them around  
  > **username_3**: @username_1 that comment would make a good answer.  
  > **username_1**: @username_3 - thanks for the nudge.  See below  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-12-05. Score: 4
  
  The case custom fields are formatted as a series of one row tables. You could add some jQuery to move them around.
  
  For example:
  
  ```
  CRM.$(function($) {
    $('#Outcomes table:nth-of-type(3n+1)').each(function (index) {
      // Combine 3 rows into 1      
      for (var i = 0; i <= 1; i++) {
        $(this).find('td:last').after($(this).next().find('td'));
        $(this).next().remove();
      }
      // Merge tables
      if (index > 0) {
        $(this).prev().find('tr:last').after($(this).find('tr'));
        $(this).remove();
      }
    });
    // Remove labels if not wanted
    $('#Outcomes td.label').remove();
  });
  
  ```
  
  You can add it to your page in various ways, but I'd create a tiny extension and drop it in there. See also [wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference](https://wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference)
  
  Without jQuery:
  
  [![enter image description here](https://i.sstatic.net/wlULB.png)](https://i.sstatic.net/wlULB.png)
  
  With jQuery:
  
  [![enter image description here](https://i.sstatic.net/JlHpw.png)](https://i.sstatic.net/JlHpw.png)
  
  
  ---
  
  