How can arrange custom fields so they are side by side?

Question

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?

Answer 1

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

Without jQuery:

With jQuery: