[RCD] Ticket #1295420: Scrolling message list obscures column headers

Roland Liebl roland at roland-liebl.de
Thu Jun 23 10:35:03 CEST 2011


I have created a script to fix messagelist table header.


The code can be inserted in template mail.html before closing body tag 
or used by a plugin (hook render_page).

It works with recent versions of:

* IE
* FF
* Chrome
* Opera

There are issues with Safari. A fixed table header is slightly 
misplaced for some reason. I was not able to find a solution yet (Safari 
is locked out yet).

It has been not test tested with Konquerer/Netscape/Android; I don't 
use these browsers.

Please review the code. I appreciate any feedback. Maybe someone is 
able to solve the Safari issue.

Please focus on comments "ToDo" aswell. These comments mark hard coded 
stuff which  should be replaced to make the script skinable.

Thanks for contributions in advance! Please notice, I'm not the most 
Javascript/Jquery coder!


--- Schnipp ----

   function fixTHEAD(){
     // always remove the dummy row first
     var last_row = $('#messagelist > tbody > tr:last').position().top;
     // check if messagelist has vertical scrollbar
     if(last_row < ($('#messagelistcontainer').height() - 
$('#messagelist > tbody > tr:first').height())){
       //No scrollbar, so we can unfix thead
       $('#messagelist thead tr').css('position','');
     // add a dummy row because first row gets hidden when we fix thead
id="messagelist_empty_row"><td> </td></tr>').insertBefore('#messagelist 
 > tbody > tr:first');
     // add missing min-width style to threads column to getter a proper 
table rendering
     // when thead is fixed
     $('#messagelist tbody tr td').each(function(){
       var elem = $(this);
       if(elem.attr('class') == 'threads'){
         elem.attr('style','min-width: 17px');
     // unfix thead to get default column widths
     $('#messagelist thead tr').css('position','');
     // read default column widths
     var width = new Array();
     var i = -1;
     var w = 0;
     var subject_col;
     var rightwidth = $('#mailrightcontainer').width();
     $('#messagelist thead tr td').each(function(){
       var elem = $(this);
       // remember where subject column is located
       if(elem.attr('class') == 'subject'){
         subject_col = i;
       width[i] = elem.width();
       w = w + width[i];
     // adjust the subject column width if there is not enough space for 
default column widths
     // ToDo: is it detectable?
     var scrollbar_width = 17;
     // ToDo: is the left space of 40px detectable?
     var space = rightwidth - w - (40 + scrollbar_width);
     if(space < 0 && subject_col){
       width[subject_col] = Math.max(width[subject_col] + space, 150);
     // now fix thead and adjust column widths
     $('#messagelist thead tr').css('position','fixed');
     i = -1;
     $('#messagelist thead tr td').each(function(){
       var elem = $(this);
   // lock out safari
     // add border-spacing style for IE to avoid unwanted spaces in 
fixed thead
     $('#messagelist').attr('style', 'border-spacing:0');
     // remove the fixed table layout style
     rcmail.addEventListener('listupdate', function(evt) {
       // adjust messagelist table if the container is resized
       // adjust messagelist table if row is inserted and there were no 
scrollbars before
       rcmail.addEventListener('insertrow', function(evt) {

--- Schnapp ---

List info: http://lists.roundcube.net/dev/

More information about the Dev mailing list