CiviCRM Community Forums (archive)

Here goes for a solution where I need this table to be scrolled. I would be interested if this could be added to the core module release. I understand that there may be more testing needed. It works OK in Firefox and IE8. A bit more tuning is needed for lte IE8 as a horizontal scroll bar appears. It also needs a bit more tidying in the upper header row. I have not tested it yet with less rows than the fixed height of 200px. I am just about to uprade to the latest version 3 so will do it again there.

I see that one of the other data tables is scrolled and that table structure is just divs.

Any takers? Comments welcome. It is easy to make the change to the two files, just open them in wordpad and (carefully) replace the code shown. Your responsibility though but would recommend copying the two files in question so you can just zap them back if needed.

The CSS added to the bottom of civicrm/css/civicrm.css:

/* Start of Data Table scroll CSS */
#crm-container .wrapOuter {
background-color:#e6e6e6;
    margin:50px 0 0 2%;
    width:55%;
    float:left;
    position:relative;
    height:205px;
    overflow:hidden;
    padding:25px 0 0;
    border:1px solid #999;
}
#crm-container .wrapInner {
    width:100%;
    height:200px;
    overflow:auto;
}
#crm-container table.caseInvolve {
    width:100%;
    margin:0 0 0 -1px;
    border-collapse:collapse;
background-color:#f6f6f6;
border-top:1px solid #999;
}
#crm-container .caseInvolve .label {
    padding:5px;
/*    border:1px solid #ccc;*/
    text-align:center;
}
#crm-container .caseInvolve thead th, #crm-container .caseInvolve tfoot th {
    font-weight:bold;
    text-align:left;
/*    border:1px solid #ccc;*/
    padding:0 3px 0 5px;
}
/*#crm-container .caseInvolve thead th {border:none;}*/
#crm-container .caseInvolve thead tr p {
    position:absolute;
    top:0;
}
#crm-container .caseInvolve .last {
    padding-right:15px!important;
}
The change to sites/all/modules/civicrm/templates/CRM/case/page/DashBoard.tpl:

<h3>{ts}Summary of Case Involvement{/ts}</h3>
<div class="wrapOuter">
<div class="wrapInner">
<table class="caseInvolve report">
<thead>
  <tr class="columnheader">
    <th>&nbsp;</th>
    {foreach from=$casesSummary.headers item=header}
    <th scope="col" class="right" style="padding-right: 10px;"><p><a href="{$header.url}">{$header.status}</a></p></th>
    {/foreach}
  </tr>
</thead>
<tfoot>
  <tr class="columnheader">
    <th>&nbsp;</th>
    {foreach from=$casesSummary.headers item=header}
    <th scope="col" class="right" style="padding-right: 10px;"><p><a href="{$header.url}">{$header.status}</a></p></th>
    {/foreach}
  </tr>
</tfoot>
<tbody>
  {foreach from=$casesSummary.rows item=row key=caseType}
   <tr>
   <th><strong>{$caseType}</strong></th>
   {foreach from=$casesSummary.headers item=header}
    {assign var="caseStatus" value=$header.status}
    <td class="label">
    {if $row.$caseStatus}
    <a href="{$row.$caseStatus.url}">{$row.$caseStatus.count}</a>
    {else}
     0
    {/if}
    </td>
   {/foreach}
  </tr>
  {/foreach}
</tbody>
</table>
</div>
</div>