Fixed column headers at Overview

[qpsad]

Hi,

this is a little fix to have the table headers (with host names) fixed. With a lot of items displayed, it makes easier to see which host the value belongs to.

This is a "normal" way of displaying items on an "Overview" screen:

Just as usuall, as long as you scroll down the screen, the row with host names disapears. Anoying.

Now with fix applied:


Now, you are able to scroll down without loosing the host names. You scrool the table - not the whole screen.
The only problem is - the table height is fixed (in css), but if needed - this can be autoadjusted by a javascript (anyone want this?).

And here are the modifications (file location is based in Ubuntu14 installations):
1. First we need the overview table to have its own, uniqe class, so we can access only this one table:

zabbix/include/view/monitoring.overview.items.php

$widget->addItem($dataTable);

change to

$dataTable->addClass('table-overview-items');
$widget->addItem($dataTable);

2. Now we apply the fixed header

add the following lines at the bottom of zabbix/styles/blue-theme.css (and/or dark-theme.css)

table.table-overview-items tbody, table.table-overview-items thead { display: block; }
table.table-overview-items tbody { overflow: auto; height: 570px; }
table.table-overview-items th { width: 133px; }

3. Now, a not-so-good-solution. I failed to add a custom JS file in monitoring.overview.items.php, so I had to modify the zabbix/js/common.js. Just add this at the end of file

jQuery(document).ready(function(){
    var overviewTableIdentificator = 'table.table-overview-items';
    var tableRow = jQuery(overviewTableIdentificator + ' tbody tr')
    jQuery(tableRow[0]).find('td').each(function(idx,e){ var header = jQuery(overviewTableIdentificator + ' thead th'); var tw = jQuery(e).css('width'); jQuery(header[idx]).css('width', tw);})
});

This will fix the columns width.


As said before - the table height can be adjusted to your needs in css files or auto-adjusted via JS. I can provide this solution if anyone is interested.
The TH fixed width may also be problem, but until now its ok for me.

Have Fun

[qpsad]

one more line into css:

table.table-overview-items .icon-maint::before, .icon-depend-up::before, .icon-depend-down::before, .icon-ackn::before { position: relative !important; }